权限.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清除浮动
五、新建一个空标签
在浮动的元素后面（同一层级），增加一个新标签，比如：<div class="clear"></div>，然后在这个空元素里面设置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
- 清除浮动的方法非常多，但是好多方法都有它的弊端，总的来说方法一、二是比较推荐的，方法四可能会有兼容性的问题，方法七就是要确保后面的元素和浮动的元素在同一层级。
本文版权归本人所有，转载请注明来源。
