CSS论坛 - Powered by Discuz! Board

标题: 为什么要清除CSS浮动 [打印本页]

作者: 威客居 时间: 2010-11-1 20:31 标题: 为什么要清除CSS浮动

很多地方都说到CSS清除浮动，这是什么意思，为什么要清除？？
希望高手解答

作者: 威客居 时间: 2010-11-1 20:31

自己顶一下，期待回答

作者: jiakeq 时间: 2010-11-1 20:37

CSS浮动清除，是为了避免该对象以上的布局掉到该对象左边或右边、因为有时我们设置float居左居右，会导致浮动，所以清除就起这个作用。
通常我们在要清除浮动加入<div style="clear:both"></div> 即可

在网页中，DIV一般都是嵌套的，外面称为窗口，里面的DIV存放内容，如果不浮动的话，如下面这段代码
<div style=”background:#ccc;”>
<div style=”float:left; width:30%; height:40px;background:#333; “> Content here</div>
</div>
本来我们期望看到的是，外面背景为#ccc的层包含了里面背景为#333的层，但实际上，外面的层在显示的时候高度几乎为0，这就是因为里面的层用了浮动，但如果强制规定外层容器的尺寸，则显得就不那么灵活了，高度就不能自动适应了。这时，如果我们在里面清除浮动
<div style=”background:#ccc;”>
<div style=”float:left; width:30%; height:40px;background:#333; “> Content here</div>
<div style=”clear:both”></div>
</div>
那么显示就正常了。

自己下来试试就知道什么原因了，不试是不清楚搞不懂的

欢迎光临 CSS论坛 (http://www.divcss5.com/bbs/)