原文在這里吹埠，轉(zhuǎn)載標(biāo)明出處斩郎，謝謝脑融！
clearfix hack做為一種無(wú)需借助額外標(biāo)簽清除浮動(dòng)的方法已經(jīng)人盡皆知了，本文給出一種優(yōu)化方案缩宜，可以進(jìn)一步減少所需css的數(shù)量肘迎。
Demo: [Micro clearfix hack](Micro clearfix hack)
Known support: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+
micro clearfix基于 Thierry Koblentz’s “clearfix reloaded優(yōu)化而來(lái)，適用于現(xiàn)代瀏覽器（modern browsers）
下面是micro clearfix的代碼片段
.cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .cf { *zoom: 1; }
"micro clearfix"生成偽類元素锻煌，并將其display屬性設(shè)置為table妓布，這樣就會(huì)創(chuàng)建一個(gè)匿名table-cell，同時(shí)生成了新的BFC宋梧，這樣意味著
:before偽類會(huì)阻止上邊距折疊匣沼，:after偽類用于清除浮動(dòng)，好處是不用隱藏產(chǎn)生的內(nèi)容了捂龄，所需要的css代碼就變少了释涛。
為了清除浮動(dòng)包含:before選擇器是沒(méi)必要的，但是:before的加入可以阻止top-margins折疊倦沧，這樣有兩個(gè)好處：
- 同其他使用BFC方式清除浮動(dòng)一樣唇撬，確保了視覺(jué)上的一致，例如使用overflow:hidden
- IE 6/7中使用zoom:1 時(shí)展融，確保了視覺(jué)上的一致
N.B.: 有一個(gè)細(xì)節(jié)：IE 6/7中在新的BFC中浮動(dòng)元素的下邊距是不會(huì)包含在內(nèi)的窖认，進(jìn)一步的描述可以看這里： Better float containment in IE using CSS expressions.
content:" "的使用避免了一個(gè)Opera的bug，如果contenteditable屬性同時(shí)出現(xiàn)在元素中時(shí)告希，這個(gè)bug會(huì)在待清除元素周圍生成空格扑浸。一種可選的修復(fù)方案是使用 font:0/0 a，多謝Sergio Cerrutti測(cè)試出這個(gè)bug
