css - "Best clearfix ever?"

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

这种方法有什么缺点吗？这最终会导致您不一定想要清除修复的元素被清除吗？还是这样的规则可以解释任何情况？

Answer 1

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

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

清除 float 不是一件复杂的事情。

它应该根据具体情况进行处理，而不是大锤“每个”元素。

这样做会以某种方式反噬你，我敢肯定。

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

---

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

zoom: 1 是为元素提供称为 hasLayout 的常用方法。将 hasLayout 应用于元素可修复某些类型的呈现问题，但它也可能导致其他问题。链接文档中的引述:

Don't give layout to all. Poison in that concentration, having layout is not the cure, it changes the rendering fundamentally.

---

我个人喜欢使用overflow: hidden 方法来包含 float 。什么时候doesn't work ，然后我使用 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;
}