一，什么是.clearfix
很多网站都讲到一个盒子清除内部浮动时可以用到.clearfix。
.clearfix:after {
content: " ";
display: block;
clear: both;
height: 0;
}
.clearfix {
zoom: 1;
}
<div class="clearfix"> <div class="floated"></div> </div>
上面的代码就是.clearfix的定义和应用，简单的说下.clearfix的原理：
- 在IE6, 7下zoom: 1会触发hasLayout，从而使元素闭合内部的浮动。
- 在标准浏览器下，.clearfix:after这个伪类会在应用到.clearfix的元素内部插入一个clear: both的块级元素，从而达到清除浮动的作用。这时的代码相当于：
<div> <div class="floated"></div> <div style="clear: both"></div> </div>
二，总结
在IE6, 7下面只要是触发了hasLayout的元素就可以清除内部浮动了。而在标准浏览器下面清除元素内部浮动的方法有很多，大多数的情况下.clearfix:after都可以满足需求。除了.clearfix:after这种方式，其余的方法无非就是产生新的Block Formatting Context以达到目的……
分析的很透彻，以前只是用，没有过多思考细节。
学习了。
clearfix的原理并非在应用了clearfix的元素后插入一个带清理属性的元素。而是在clearfix内部的所有元素完结后，追加一个清理浮动的元素进去。这点可以通过一个最简单的实验看到效果。嵌套效果应该如下：
<div>
<div class=’float’></div>
<div style=’clear: both;’></div>
</div>
另外，重构后的clearfix是不合理的(重构前的clearfix是最完美的，那个长长的Demo分析有误)。
display的属性值为table的情况，效果往往不能符合要求，你可以试试，被当作table渲染的盒子，其边框不会自动扩展，而会收缩到仅仅包含住里面的元素，这和IE下的表现不一致。当然，如果这个元素设定了固定宽度，那没问题。另外，渲染为table还会衍生一系列意外问题出来，相当让人抓狂。