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

发布网友发布时间：2022-04-28 14:21

共1个回答

热心网友时间：2022-04-28 15:50

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

1234

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

12345

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

或者给浮动层预留位置：

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