“有史以来最好的清除修复？”

我在这里看到了这种相当不同的clearfix方法：http://www.marcwatts.com.au/blog/best-clearfix-ever/ http://www.marcwatts.com.au/blog/best-clearfix-ever/

它建议添加以下CSS代码，该代码可以自动执行clearfix，并且不需要您向要清除的元素添加“clearfix”或类似的类。

/* our Global CSS file */
article:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
aside:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
div:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
footer:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
form:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
header:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
nav:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
section:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }
ul:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }

/* our ie CSS file */
article { zoom:1; }
aside { zoom:1; }
div { zoom:1; }
footer { zoom:1; }
form { zoom:1; }
header { zoom:1; }
nav { zoom:1; }
section { zoom:1; }
ul { zoom:1; }

这种方法有什么缺点吗？这是否会最终清除您不一定想要清除的元素？或者规则是否可以解释任何情况？

我认为这是一个坏主意。你真的会相信那些看似忘记这样做的人吗：

article, aside, div, footer, form, header, nav, section, ul { zoom:1; }

清除浮动并不是一件复杂的事情。

应该根据具体情况来处理，而不是大锤锤击的到“每个”元素上。

这样做会反过来咬你一口some方式，我确信这一点。

一方面，我同意@Guffa 的回答。

反对它的一个边缘案例原因涉及 IE7：http://www.satzansatz.de/cssd/onhavinglayout.html http://www.satzansatz.de/cssd/onhavinglayout.html

zoom: 1是提供称为hasLayout到元素。正在申请hasLayout元素修复了某些类型的渲染问题，但它也可以cause其他问题。引用链接文档：

不要给所有人布局。毒药在这种浓度下， 布局并不是解决问题的方法，而是 从根本上改变了渲染。

我个人喜欢使用overflow: hidden包含浮动的方法。当那个不起作用 https://stackoverflow.com/questions/5565668/in-2011-is-there-any-need-for-clearfix/5566093#5566093，然后我使用clearfix。

您应该使用以下版本的clearfixhttp://html5boilerplate.com/ http://html5boilerplate.com/:

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}