clearfix清除浮动

起源：

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

说明：

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

因为此方法针对的浏览器或成为历史（尤为是Mac下的IE5 ），或正在靠近
标准的路上，这个方法就再也不那么与时俱进了。

抛掉对 IE/Mac 的支持以后，新的清除浮动方法：

/* new clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

说明：

IE6 和 IE7 都不支持 :after 这个伪类，所以须要后面两条来触发IE6/7的haslayout，以清除浮动。幸运的是IE8支持 :after 伪类。所以只须要针对IE6/7的hack了。

糖伴西红柿说：
Jeff Starr 在这里针对IE6/7用了两条语句来触发haslayout。我在想做者为何不直接用 * 来直接对 IE6/7 同时应用 zoom:1 或者直接就写成：

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix{*zoom:1;}

以我目前的浅薄认知来说，以上写法应该也能够直接达到一样效果。关于这个地方，在文章的评论里也有些讨论，我但愿再听听你们的高见。

我平时都是用 overflow:hidden 来清除浮动的，由于够简单粗暴。可是 overflow 有时候也不太适用：

父级元素使用 overflow:hidden 时，若是其子元素定位到部分或所有在父元素以外，父元素就会对超出其外的子元素部分进行裁剪。

对 css3 来讲，也会 overflow:hidden 也会对一些属性产生影响。
例如 box-shadow, 当父元素使用 overflow:hidden 属性时，box-shadow 会被裁剪。

其余可能被影响的元素如 text-shadow 和 transform。能够参考 Andy Ford 的 demo

对于那些不肯意再给标签添加额外的 clearfix 类来清除浮动的人来讲，直接将须要清除浮动的元素添加进清除浮动代码块这个组也是一个办法。

.group:after,
#content:after,
#sidebar:after,
#some .other .thing:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
zoom:1;
}

这种状况下，html 和 css 文件就像一个跷跷板的两头。html 代码却是整洁了，css 代码却出现了必定的繁冗。并且一旦专题页面过长，或者在项目中使用，用这个清除组的方式反而会不胜其扰。

归结下来，仍是得看我的、项目的权衡选择.虽然我一直用简单粗暴的overflow:hidden，可是如今更倾向于使用 clearfix，感受这种一体化的东西更靠谱，能避免偶尔对 zoom 的遗忘。

成熟的东西稳定性好，可是会比较复杂、厚重;简单的灵活性好，可是过于零散、随意，没有组织性，还没那么稳定.权衡决定到底要使用那种方法，有时候反而比问题自己还让人头疼.

我我的的想法是没有好与坏的区别，只有合适不合适的区别。可是咱们一直都受困于所受的教育，什么问题都有标准答案，非对即错，非好即坏。常常可见对 一些工具的讨论，都是奔着争出个谁好谁坏而去的，例如 jQuery mootools YUI.相比起究竟是好谁坏，咱们仍是最好赶忙转变思想，摒弃”一刀切”的思想吧。