为什么要清除浮动呢？清除浮动的本质是什么？

清除浮动主要是为了解决父级元素因为子级浮动引起的内部高度为0的问题

1、overflow: hidden

子元素浮动了，那么给父元素设置属性overflow: hidden，浮动就清除了，这个方法唯一的缺点就是超出父元素的会被隐藏。

2、增加额外标签，然后添加属性clear: both

在这个使用了浮动之后增加一个标签，这个标签添加属性clear: both，而且这个标签还需要是块或者是行标签，span和a等标签也无效。这种方法会给页面增加很多无用的标签，但是如果你一个div之后又是一个div，然后内容是写在下一个div里面，那么给这个div添加还是可行的。

3、给父元素添加高度

我们都知道浮动之后造成了高度塌陷，那么我们只要给父元素添加了高度，就可以解决浮动问题。缺点也很明显，那就是父元素高度必须固定了。

4、给所有元素添加浮动

浮动的元素碰到另一个浮动的元素就会停止，那么给所有元素添加浮动也可以解决问题。但是这方法实在是太弱智了，一般不会有人用吧。

5、使用display: inline-block

给父元素设置这个属性，浮动可以解决，唯一缺点就是margin: 0 auto失效了。

6、使用<br clear="both">

因为br自带clear属性，所以使用它可以解决浮动。这跟添加空标签一样，多了很多无用标签，也不推荐。

7、after伪类清除

这是最推荐的方法了，如果有用过bootstrap的可以看一下他们也是使用的clearfix类就是用的这个方法。注意此方法IE6、IE7下不兼容。

8、设置overflow: auto

这个跟设置hidden差不多，缺点就是不能自定义高度了。

9、设置display: table

作者：wade3po
链接：https://www.jianshu.com/p/ce0bb8db882f
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。