分享一個清除浮動的最佳化方案

clearfix hack做為一種無需藉助額外標籤清除浮動的方法已經人盡皆知了，本文給出一種最佳化方案，可以進一步減少所需css的數量。

Demo: Micro clearfix hackKnown support: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

micro clearfix基於 Thierry Koblentz’s “clearfix reloaded最佳化而來，適用於現代瀏覽器（modern browsers）

下面是micro clearfix的程式碼片段

.cf:before,.cf:after {    content: " ";     display: table; }.cf:after {    clear: both;}.cf {    *zoom: 1;}

"micro clearfix"產生偽類元素，並將其display屬性設定為table，這樣就會建立一個匿名table-cell，同時產生了新的BFC，這樣意味著
:before偽類會阻止上邊距摺疊，:after偽類用於清除浮動，好處是不用隱藏產生的內容了，所需要的css代碼就變少了。

為了清除浮動包含:before選取器是沒必要的，但是:before的加入可以阻止top-margins摺疊，這樣有兩個好處：

• 同其他使用BFC方式清除浮動一樣，確保了視覺上的一致，例如使用overflow:hidden

• IE 6/7中使用zoom:1 時，確保了視覺上的一致
  N.B.: 有一個細節：IE 6/7中在新的BFC中浮動元素的下邊距是不會包含在內的，進一步的描述可以看這裡： Better float containment in IE using CSS expressions.
  content:" "的使用避免了一個Opera的bug，如果contenteditable屬性同時出現在元素中時，這個bug會在待清除元素周圍產生空格。一種可選的修複方案是使用 font:0/0 a，多謝Sergio Cerrutti測試出這個bug

【相關推薦】

1. 免費css線上視頻教程

2. css線上手冊

3. php.cn獨孤九賤（2）－css視頻教程