Question

为什么要清除浮动

Answer 1

1、在网页中，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>
那么显示就正常了。
2、如果全部元素都浮动的话，理论上也是可以的，并且有很多网页的排版布局都已经实现了全部DIV化，但这仅限于排版布局，因为这是DIV的强项，但是包含内容这块还是让其他元素去做吧。因为如果功力不到的话，全部浮动的定位和尺寸问题不太好把握，浏览器之间显示的也不尽相同。