原文在這里，轉載標明出處，謝謝！

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

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優化而來，適用于現代瀏覽器（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