我想大家在寫CSS的時候應該都對清除浮動的用法深有體會，今天我們就還討論下clearfix的進化史吧。
首先在很多很多年以前我們常用的清除浮動是這樣的。
.clear{clear:both;line-height:0;}
現在可能還可以在很多老的站點上可以看到這樣的代碼，相當暴力有效的解決浮動的問題。但是這個用法有一個致命傷，就是每次清除浮動的時候都需要增加一個空標籤來使用。
<p class="clear"></p>
這種做法如果在頁面複雜的佈局要經常清楚浮動的時候就會產生很多的空標籤，增加了頁面無用標籤，不利於頁面優化。但是我發現大型網站中 居然還在使用這種清楚浮動的方法。有興趣的同學可以上他們首頁搜索一下他們的.blank0這個樣式名稱。
因此有很多大神就研究出了 clearfix 清除浮動的方法，直接解決了上面的缺陷，不需要增加空標籤，直接在有浮動的外層加上這個樣式就可以了，這也是我們今天要討論的clearfix進化史。
起源
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
* html .clearfix { height: 1%; }//Hides from IE-mac
.clearfix { display: block; }//End hide from IE-mac
解釋一下以上的代碼：
對大多數符合標準的瀏覽器應用第一個聲明塊，目的是創建一個隱形的內容爲空的塊來爲目標元素清除浮動。
第二條爲clearfix應用 inline-table 顯示屬性，僅僅針對IE/Mac。利用 * 對 IE/Mac 隱藏一些規則：
height:1% 用來觸發 IE6 下的haslayout。
重新對 IE/Mac 外的IE應用 block 顯示屬性。
最後一行用於結束針對 IE/Mac 的hack。（是不是覺得很坑爹，Mac下還有IE）
起源代碼可能也是很早期的時候了，再往後Mac下的IE5也發展到IE6了，各種瀏覽器開始向W3C這條標準慢慢靠齊了。所以就有了下面這個寫法出現了。
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
IE6 和 IE7 都不支持 :after 這個僞類，因此需要後面兩條來觸發IE6/7的haslayout，以清除浮動。幸運的是IE8支持 :after 僞類。因此只需要針對IE6/7的hack了。
後面又有人對此進行了改良：
Jeff Starr 在這裏針對IE6/7用了兩條語句來觸發haslayout。我在想作者爲什麼不直接用 * 來直接對 IE6/7 同時應用 zoom:1 或者直接就寫成：
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix{*zoom:1;}
我塞！是不是簡潔了非常多，給力。
但是對於很多同學這種優化程度代碼還是不夠給力，clearfix 發展到現在的兩個終極版。
終極版一：
.clearfix:after {
content:"\200B";
display:block;
height:0;
clear:both;
}
.clearfix {*zoom:1;}/*IE/7/6*/
解釋下:content:"\200B";這個參數，Unicode字符裏有一個“零寬度空格”，即 U+200B，代替原來的“.”，可以縮減代碼量。而且不再使用visibility:hidden。
終極版二：
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{clear:both;}
.clearfix{
*zoom:1;/*IE/7/6*/
}
這兩個終極版代碼都很簡潔，終極版一和二都可以使用，以上代碼都經過測試，大家趕緊用一下吧，如果有什麼問題請及時跟我反饋，如果你還停留在clearfix的老代碼的時候就趕緊更新一下代碼吧。