Question

css清除浮动float的三种方法总结，为什么清浮动

Answer 1

不清除浮动的话，浮动层后面的非浮动内容就有可能被浮动层所覆盖，造成版面错乱，所以必须清除浮动。除非浮动层所在的位置是有固定的高度的，也就是说不管是否浮动它所占用的区域都不变，这样就无需清除。比如：

<div>
    <div style="float:left; width:100px; height:100px; background-color:#f00"></div>
</div>
<div style="width:200px; height:200px; background-color:#00f"></div>

可以看到蓝色框会被红色框覆盖（IE6-9中则不会，因为它不是标准浏览器）。清除浮动以后就不会了：

<div>
    <div style="float:left; width:100px; height:100px; background-color:#f00"></div>
    <div style="clear:both"></div>
</div>
<div style="width:200px; height:200px; background-color:#00f"></div>

或者给浮动层预留位置：

<div style="width:100px; height:100px">
    <div style="float:left; width:100px; height:100px; background-color:#f00"></div>
</div>
<div style="width:200px; height:200px; background-color:#00f"></div>

Answer 2

我推荐一种方法去清浮动，特别简单。

就是在要清浮动的地方加上：
<div style="clear:both;"></div>
即可。
清除浮动的作用是：清除同行元素，不允许其它元素与之在一行内。

PS：如果想深入研究，请参考https://segmentfault.com/a/1190000004237437

Answer 3

其实究其原因，就两种原理清除与闭合，可以看下我写的这个思路可能会清楚一点https://juejin.im/post/5c5027c26fb9a049f912fa10