关于清除浮动的方法

权限.png

image.png

app.jsx.png

---

刚学习了浮动，这里整理一下清除浮动的方法。

---

一、伪元素

伪元素清除浮动是伪元素的用途之一，这是清除浮动的一个相对比较好的方法，可以减少无意义的标签，使得html尽量简单。可以在浮动元素的容器内增加一个class类，比如说取名为clearfix。然后在clearfix里面添加一个伪元素，只能用after，利用这个看不见的元素来清除浮动。这里要注意的一点伪元素生成的默认是行内元素，而是clear的对象一定是块级元素，否则不起作用，所以要设置一下display属性。

未清除浮动之前

使用伪元素清除浮动之后

二、伪元素+表格元素

在伪元素里面设置display属性为table，也是比较优越的方法。

利用伪元素+表格元素清除浮动

三、表格元素

不用伪元素，直接在父容器里面display: table;来模拟表格布局，也可以清除浮动，并且实现自动对齐。当然表格元素也会有它的弊端。

利用表格元素清除浮动

四、overflow属性

给浮动元素的父容器添加overflow:hidden;或overflow:auto;或者overflow: scroll;，也可以清除浮动。

利用overflow:hidden清除浮动

利用overflow:auto清除浮动

利用overflow:scroll清除浮动

五、新建一个空标签

在浮动的元素后面（同一层级），增加一个新标签，比如：

，然后在这个空元素里面设置clear: both清除浮动。当然这样的话，就会增加无用的标签，使得html变得冗余。

新建标签清除浮动

六、父容器设置浮动

给浮动元素的父容器也设置浮动，也能达到清除浮动的效果。但它会给下面的元素带来布局的影响。

浮动元素的父容器设置浮动来清除浮动

七、利用浮动后面的元素

当浮动元素同一层级的后面还有元素的时候，可以给后面的元素设置清除浮动，来达到为上面的元素清除浮动的效果。

给浮动后面的元素设置清除浮动

八、父容器设置display: inline-block

给父容器设置display: inline-block之后，容器就可以形成BFC，这样就会有独立的渲染空间，就算有浮动元素也会把容器撑开。

父容器display:inline-block清除浮动

总结：

• BFC
  BFC的全称是 Block Format Content，具体还可以参考深入理解BFC和Margin Collapse有三个特性:第一，BFC会阻止垂直外边距（margin-top、margin-bottom）折叠；第二，BFC不会重叠浮动元素；BFC可以包含浮动。所以可以利用BFC的特性来清除浮动。
  其实上面的方法三、四、六、八都是利用BFC来清除浮动。
  总的来说，只要父容器形成BFC就可以达到清除浮动的效果。而要形成BFC只要满足以下一条就可以：
• float为 left|right
• overflow为 hidden|auto|scroll
• display为 table-cell|table-caption|inline-block
• position为 absolute|fixed
• 清除浮动的方法非常多，但是好多方法都有它的弊端，总的来说方法一、二是比较推荐的，方法四可能会有兼容性的问题，方法七就是要确保后面的元素和浮动的元素在同一层级。

---

本文版权归本人所有，转载请注明来源。