关于清除浮动的方法

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

伪元素清除浮动是伪元素的用途之一，这是清除浮动的一个相对比较好的方法，可以减少无意义的标签，使得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，这样就会有独立的渲染空间，就算有浮动元素也会把容器撑开。

总结：

首先，我们制作一个简单的html页面。父级元素是div，内部元素，是两个ul，两个ul分别是左浮动。并且为父级元素添加边框。

2/7

我们可以发现，父级元素根本没有被子元素的高度所撑开，而是只保持了h标签的高度，这就是浮动，导致的。

3/7

清除浮动，顾名思义就是clear:both，这的确是一种方法，但是要确定我们的clear:both是应用在哪里。

4/7

我们可以在html页面上，最后一个浮动元素的后面，添加一个div，并设置其style为clear:both。

5/7

我们还可以为浮动的元素的父级元素添加伪类，*::after{content""display:blockclear:both}，这样将会使得浮动止于此

6/7

除了这些，我们还可以为父级元素添加overflow属性，可以设为hidden,也可以设为auto

7/7

以上三种方法是小渔自己通过亲身经历，总结而来的哦。正确的页面显示效果如图所示

---