Question

css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响

Answer 1

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

1
2
3
4

<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中则不会，因为它不是标准浏览器）。清除浮动以后就不会了：

1
2
3
4
5

<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>

或者给浮动层预留位置：

1
2
3
4

<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>