不清除浮动的话,浮动层后面的非浮动内容就有可能被浮动层所覆盖,造成版面错乱,所以必须清除浮动。除非浮动层所在的位置是有固定的高度的,也就是说不管是否浮动它所占用的区域都不变,这样就无需清除。比如:
<div> <div style="float:leftwidth:100pxheight:100pxbackground-color:#f00"></div></div><div style="width:200pxheight:200pxbackground-color:#00f"></div>
可以看到蓝色框会被红色框覆盖(IE6-9中则不会,因为它不是标准浏览器)。清除浮动以后就不会了:
<div> <div style="float:leftwidth:100pxheight:100pxbackground-color:#f00"></div> <div style="clear:both"></div></div><div style="width:200pxheight:200pxbackground-color:#00f"></div>
或者给浮动层预留位置:<div style="width:100pxheight:100px"> <div style="float:leftwidth:100pxheight:100pxbackground-color:#f00"></div></div><div style="width:200pxheight:200pxbackground-color:#00f"></div>
给这三个DIV加一个父DIV,并定义父DIV的宽度为三个DIV的总宽度之和,
这样不管怎么变都不会下落了
<div>
<div></div><div></div><div></div>
</div>
不知道怎么说清楚..举例来说明吧...~有以下代码~
<div id="a">a</div>
<div id="b">b</div>
在元素的自然流下~~a层将和b层一上一下~~
加入我们想实现a b层并列的效果~~那么就需要将a b 浮动~
但是假如下面还有一个C层~~由于a b层浮动了~c层也将环绕在a b层周围~
但是如果我们想让c层在a b层下面出现~那就需要清理浮动~恢复页面元素的自然流~浮动并不是清理自身的浮动的效果~而是清理上面接触到的浮动元素的浮动~使浮动元素后面的元素不接受它们的浮动~按照正常的元素流进行布局....
因此清理浮动和浮动并不矛盾~
清理浮动有很多方法~
可以用clear:(left right both)~个人比较喜欢用overflow来清理浮动~
你可以搜一下一篇叫 清理浮动全家 的文章~~比较全面的介绍了各种清理浮动的方法~