网站开发进阶(四十二)巧用clear:both

网站开发进阶(四十二)巧用clear:both

前言

我们在制作网页中用div+css或者称xhtml+css都会遇到一些很诡异的情况，明明布局正确，但是整个画面却混乱起来了，有时候在IE6下看的很正常的，到ie7或者火狐下看时，就一片混乱了，无论怎么计算，就是不能将排版改正过来。其实，这一切都是浮动搞得鬼，也就是css中的float，要解决情况，就需要使用clear:both了。

CSS手册上是这样说明的：该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。

当属性设置float（浮动）时，其所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动），或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除。

在开发中，从美工MM给你Html代码中，肯定能经常看 <div style="clear:both;"></div>这样的代码，但是你真的能明白它是做什么用的吗？

<div style="border:2px solid red;">
<div style="float:left;width:80px;height:80px;border:1px solid blue;">
TEST DIV
</div>
<div style="clear:both;"></div>
</div>

你可以将此部分代码放到一个HTML页面看看效果，然后在去掉<div style="clear:both;"></div>看一下效果,就知道这句话的作用了。

如图：

（1）有clear:both的：



（2）无clear:both的



这样看，应该就一目了然了：原来后边的Clear:both;其实就是利用清除浮动来把外层的div撑开，所以有时候，我们在将内部div都设置成浮动之后，就会发现，外层div的背景没有显示，原因就是外层的div没有撑开，太小，所以能看到的背景仅限于一条线。

美文美图