前端开发-CSS-浮动float

最新推荐文章于 2024-05-12 22:02:08 发布

Mr代先森

最新推荐文章于 2024-05-12 22:02:08 发布

阅读量211

点赞数

本文链接：https://blog.csdn.net/DAIJZ12138/article/details/96462340

版权

一.浮动float

详细内容见：https://www.cnblogs.com/smyhvae/p/7297736.html

作用：1.让多个块级元素一行无缝显示；（inline-block也可以实现行内块级元素）

2.文字环绕效果。

特性：

1.脱离标准流

浮动后，不区分行内、块级，所有元素都能并排，都能设置宽高。

2.浮动元素互相贴靠

左浮动：沿父容器右侧顶部向左推入子容器，如果卡主推不动了，判断当前位置能否全部显示该子容器，如果能则完成，如果不能则子容器往下走继续找空挡往里面推入，以此类推。右浮动相反。

注意：无论父容器是否浮动，都以父容器为准。

3.浮动“字围”

元素浮动后，其他元素无视浮动元素占据其位置，但其他元素内的文本依然会让出位置（部分无视）；定位中的absolute是绝对无视。如下图所示：

4.收缩

一个浮动元素如果没有设置width，将自动收缩为内容的宽度（类似行内元素）

注意：若父不浮，子都浮，且父无宽高，则父收缩为一点，如下图所示：

5.一有全有：父元素中的孩子，只要一个浮动，其余都得浮动才行。

二.清除浮动

目的：清楚浮动与浮动之间的影响。

原因：有高度的盒子才能关住浮动元素（浮动不会相互影响），如果父盒子没有高度，不能为浮动子元素撑起一个容器，即父盒子高度为0；则浮动会超出父盒子，与其他浮动之间互相影响。

父盒子能撑起高度=父盒子能关住浮动子元素！！！

方法1：加高法

做法：给浮动元素的祖先元素加高度

缺点：工作上，我们绝对不会给所有的盒子加高度，这是因为麻烦，并且不能适应页面的快速变化。

方法2：clear:both；法

做法：给父盒子增加clear:both；表示自己的内部元素，不受其他盒子的影响。（最简单的清除浮动的方法）

缺点：它所在的标签的margin属性失效。

margin失效的本质原因是：盒子高度为零。

方法3：隔墙法

1.隔墙法

做法：在两个父盒子中间用一个新的盒子隔开，然后给这个新的盒子设置clear: both;属性。（若要使两个旧盒子之间有margin间隔，可以给新盒子设置height，以达到margin的效果（曲线救国），因为新的盒子无法设置margin属性。）

缺点：虽然一道墙可以把两个盒子隔开，但是这两个盒子没有高，也就是说无法wrap_content。

2.内墙法——一个父亲是不能被浮动的儿子撑出高度的。

做法：在子元素都浮动的父盒子（没有设置高度）内，加一个不浮动的子元素，并为新的子元素设置clear：both；属性，新子元素作为内墙可以给它所在的父盒子撑起高度，也即父盒子可以自适应内容。

优势：内墙法可以给它所在的父盒子撑出高度，即可以自适应内容。

方法4：overflow：hidden；法

一个父亲不能被自己浮动的儿子撑出高度。但只要给父亲加上overflow:hidden; 属性，那么父亲就能被儿子撑出高度了。即父元素能够将浮动的子元素关在自己的范围内。

方法5：伪元素选择器法

1.after伪元素清除浮动

做法：通过伪元素选择器after，在盒子后面添加一个clear:both；属性，跟第二种方法是一样的道理。

在对象设置（CSS属性设置）的后清除浮动

E：after，设置在对象后（依据对象树的逻辑结构）发生的内容。

.clearfix:after{
            content:'';  /*after伪元素选择器必须有content属性*/
            display:block;
            clear:both;  /*清除浮动*/
        }

2.双伪元素清除浮动

在对象设置（CSS属性设置）的前后都清除浮动

.clearfix:before， .clearfix:after{
            content: '';
            display: block;
            clear: both;
        }

三.margin相关

1.margin塌陷

标准文档流中，竖直方向的margin不叠加，以较大的为准(水平方向的margin是可以叠加的，即水平方向没有塌陷现象)。

如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的。

2.盒子居中`margin:0 auto;`

注意：

使用margin:0 auto;的盒子，必须有明确的width。（可以这样理解，如果没有明确的witdh，那么它的witdh就是霸占整行，没有意义）
只有标准流的盒子，才能使用margin:0 auto;居中。也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;
margin:0 auto;是让盒子居中，不是让盒子里的文本居中。文本的居中，要使用text-align:center;