一种代码量更少的(micro clearfix)清除浮动的hack

原文在这里，转载标明出处，谢谢！

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