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

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

Demo: Micro clearfix hack
Known 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;
}

" 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會在待清除元素周圍產生空格。
  
  ##【相關推薦】

1. 

免費css線上影片教學

2. css線上手冊

#3. php.cn獨孤九賤（2）－css影片教學

#

以上是分享一個清除浮動的最佳化方案的詳細內容。更多資訊請關注PHP中文網其他相關文章！