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視頻教程