clearfix的运行机制和进化

话说为什么要把这个记下来，因为昨天去面试，问了clearfix的原理，当时脑子不清晰，回答得真是想要咬舌自尽。遂，决定，要搞清楚来龙去脉~~~（资料来自网上博主们，）http://www.aseoe.com/show-10-192-1.html

1.最初的清除浮动

　　.clear{clear:both;line-height:0;}：

 　　现在可能还可以在很多老的站点上可以看到这样的代码，相当暴力有效的解决浮动的问题。但是这个用法有一个致命伤，就是每次清除浮动的时候都需要增加一个空标签来使用。

　　这种做法如果在页面复杂的布局要经常清楚浮动的时候就会产生很多的空标签，增加了页面无用标签，不利于页面优化。但是我发现大型网站中 居然还在使用这种清楚浮动的方法。有兴趣的同学可以上他们首页搜索一下他们的.blank0这个样式名称。

2.clearFix的发展：

　　　　因此有很多大神就研究出了 clearfix 清除浮动的方法，直接解决了上面的缺陷，不需要增加空标签，直接在有浮动的外层加上这个样式就可以了，这也是我们今天要讨论的clearfix进化史。

　　   

解释一下以上的代码：

• 对大多数符合标准的浏览器应用第一个声明块，目的是创建一个隐形的内容为空的块来为目标元素清除浮动。
• 第二条为clearfix应用 inline-table 显示属性，仅仅针对IE/Mac。利用 * 对 IE/Mac 隐藏一些规则：
• height:1% 用来触发 IE6 下的haslayout。

• 重新对 IE/Mac 外的IE应用 block 显示属性。

• 最后一行用于结束针对 IE/Mac 的hack。（是不是觉得很坑爹，Mac下还有IE）