"有史以来最好的clearfix？"

Question

我在这里看到了这个相当不同的clearfix方法: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; }

这种方法有什么缺点吗？这可能最终清除了你可能不一定想要clearfix的元素吗？或者规则是否会影响任何情况？

Answer 1

我认为这是一个坏主意.你是否真的会相信那些似乎忘记这样做的人:

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

清理浮标并不是一件复杂的事情.

它应该根据具体情况进行处理,而不是对"每个"元素进行雪橇打击.

做到这一点会回来以某种方式咬你,我很确定.

首先,我同意@ Guffa的回答.

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

zoom: 1是一种提供已知hasLayout元素的常用方法.应用于hasLayout元素可修复某些类型的渲染问题,但也可能导致其他问题.来自链接文档的引用:

不要给所有人布局.在这种集中的毒药,布局不是治愈,它从根本上改变了渲染.

我个人喜欢使用该overflow: hidden方法来包含浮动.当这不起作用,那么我使用clearfix.

您应该使用http://html5boilerplate.com/中的clearfix版本:

.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;
}