Question

关于清除浮动的方法

Answer 1

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

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

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

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

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

在浮动的元素后面（同一层级），增加一个新标签，比如： <div class="clear"></div> ，然后在这个空元素里面设置 clear: both 清除浮动。当然这样的话，就会增加无用的标签，使得html变得冗余。

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

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

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

总结：