原文：

　　简书原文：https://www.jianshu.com/p/c7f02b50a8f5

清除浮动的原因

　　当给元素添加上浮动的时候，会造成页面布局上的一些意想不到的结果，如：子元素设置浮动无法撑起没有设置高度的父元素。

　　

　　可以看出本应包住3个 inner DIV的 outer DIV 却没有包住他们，此刻只剩一条由上下边框贴合组成的线，同时 footer DIV元素也跑到了三个浮动元素的底下。

 

清除浮动的方式

1、加高度

　　这是最简单的办法，加上高度之后，让包含框包含浮动框，不过这不适用于高度不明的包含框。

 2、加额外空标签并且定义clear：both属性从而清除浮动

 　　这是早期普遍使用的方法，但是对于有代码洁癖的人来说，解决的不够完美，一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签，造成结构的混乱。

3、通过将包含框设置成BFC从而清除浮动

3.1、通过伪类元素清除浮动

　　通过伪类元素实现清除浮动的效果，或者说通过伪类元素形成一个BFC的块框，从而让内部的float的元素不影响到外部元素的排版，也就是不会出现因为出现浮动而撑不起盒子高度的情况。

　　zoom:1：是为了兼容IE浏览器的haslayout布局属性，触发其布局效果，产生和BFC类似的效果。

3.2、通过overflow:hidden清除浮动

　　通过给父元素设置overflow:hidden;来将父元素变成一个BFC，从而清除浮动。

　　缺点：这种方式会隐藏超出包含框的内容

3.3、通过绝对定位清除浮动

　　通过给父元素同样设置浮动属性，或者设置position:absolute来将包含框设置为BFC的布局，但是设置了这两个属性就会让父元素脱离了文档流从而产生其它的问题。

 参考网站