DIV+CSS佈局的優點不用多說了,現在越來越多站都用這種佈局方式,表格佈局慢慢的越來越少人用了.

不過DIV+CSS還是有許多不便的,因為他比表格佈局難控制,稍做不好,不管是新手還是老手,一不小心都會整個版面走樣,或是在各瀏覽器中亂套.所以,DIV+CSS佈局一般應用還是比較少.

今天這裡要說的是DIV+CSS中clear:both的作用,先看下例:

例項：
有css定義：
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 clear:both;>另起一行</p>