核心提示：前言我们在制作网页中用p+css或者称xhtml+css都会遇到一些很诡异的情况，明明布局正确，但是整个画面却混乱起来了，有时候在IE6下看的很正常的，到ie7或者火狐下看时，就一片混乱了，无论怎么计...
前言
我们在制作网页中用p+css或者称xhtml+css都会遇到一些很诡异的情况，明明布局正确，但是整个画面却混乱起来了，有时候在IE6下看的很正常的，到ie7或者火狐下看时，就一片混乱了，无论怎么计算，就是不能将排版改正过来。其实，这一切都是浮动搞得鬼，也就是css中的float，要解决情况，就需要使用clear:both了。
CSS手册上是这样说明的：该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。
当属性设置float（浮动）时，其所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动），或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除。
在开发中，从美工MM给你Html代码中，肯定能经常看
这样的代码，但是你真的能明白它是做什么用的吗？
<p style="float:left;width:80px;height:80px;border:1px solid blue;"> TEST DIV <p style="clear:both;"> </p></p></p>
你可以将此部分代码放到一个HTML页面看看效果，然后在去掉
看一下效果,就知道这句话的作用了。如图：
（1）有clear:both的：
（2）无clear:both的
这样看，应该就一目了然了：原来后边的Clear:both;其实就是利用清除浮动来把外层的p撑开，所以有时候，我们在将内部p都设置成浮动之后，就会发现，外层p的背景没有显示，原因就是外层的p没有撑开，太小，所以能看到的背景仅限于一条线。
