CSS中的Clear

在当今web2.0时代,在设计网页的时候大家都会使用div+css进行布局,有点就不用多说了,自然有很多好处了,至少会比用table布局少些代码,而用div布局也有他们的不方便之处,就是比较复杂,尤其是多个div在一行显示,多个浏览器兼容等等,所以初学者还是尽量用table布局,待熟练了在用div.
现在说的是DIV+CSS中clear:both的作用,先看下例:
p.f1{float:left;width :100px;}
p.f2{float:left;width :400px;}

<p class="f1">这个是第1项 </p>
<p class="f2">这个是第2项 </p>
<p >换一行</p>

以上的第三行,会和第一行排在一起,为什么呢,因为当属性设置float（浮动）时，他所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动）,或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除。

应改为:

如果不用清除浮动，那么第3个<P>的文字就会和第一二行在一起
所以我们在第3个<P>加一个清除浮动。
<p class="f1">这个是第1项 </p>
<p class="f2">这个是第2项 </p>
<p style="clear:both;">另起一行</p>

这样可以正常显示了.

 

 

 

 

也可以参考http://www.webjx.com/css/divcss-5014.html