首先,copy下bootstrap里面的写法:
.clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;line-height:0;content:"";}.clearfix:after{clear:both;}
在一个有float 属性元素的外层增加一个拥有clearfix属性的div包裹,可以保证外部div的height,即清除"浮动元素脱离了文档流,包围图片和文本的 div 不占据空间"的问题。
看到”闲聊CSS之关于clearfix–清除浮动“ (/e2ghost/post/50238)的文章给了一个比较清晰的分析:
构成BlockFormattingContext的方法有下面几种:float的值不为none。overflow的值不为visible。display的值为table-cell,table-caption,inline-block中的任何一个。position的值不为relative和static。很明显,float和position不合适我们的需求。那只能从overflow或者display中选取一个。因为是应用了.clearfix和.menu的菜单极有可能是多级的,所以overflow:hidden或overflow:auto也不满足需求(会把下拉的菜单隐藏掉或者出滚动条),那么只能从display下手。我们可以将.clearfix的display值设为table-cell,table-caption,inline-block中的任何一个但是display:inline-block会产生多余空白,所以也排除掉。剩下的只有table-cell,table-caption,为了保证兼容可以用display:table来使.clearfix形成一个BlockFormattingContext因为display:table会产生一些匿名盒子,这些匿名盒子的其中一个(display值为table-cell)会形成BlockFormattingContext。这样我们新的.clearfix就会闭合内部元素的浮动。