css中的清除浮動

清除浮動是css的基礎，但有時候會忘了一些最簡單的東西

浮動因為在文檔流之外，所以會造成父元素的坍塌。父元素之後的元素排版就會亂。

常用的方法是在浮動父元素中添加cf類，然後定義cf樣式，並將其放在公共庫內。

 1 .box.cf
 2     img.fl
 3     img.fr
 4 <!-- 以上是jade格式 -->
 5 
 6 .cf:after{
 7     display:table;
 8     content:"";
 9     clear:both;
10 }
11 
12 .cf{*zoom:1;}
13 <!-- 以上為對應css -->

因為clear 屬性定義了元素的哪邊上不允許出現浮動元素，

這裡是兩邊都清除了，

所以通過after插入的元素就在img（浮動）下麵，不會從父元素.box的頂部開始佈局，

從而也就撐起了.box。

zoom是為了滿足IE6/7，不過現在應該沒人用這兩個瀏覽器了。