css - 这可能是新的clearfix吗？

Question

有没有更简化的使用方式.clearfix？

老的：

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

我的新明确修复：

.coreys-clearfix:after {
    content: "";
    display: block;
    clear: both;
}

我把它通过一个验证器，我没有错误。有其他人知道或看到不能使用它的任何原因吗？它只保存了 3 行代码和一个.，但仍然如此。

Answer 1

我不这么认为，不。

点的原因是为了.clearfix:after在旧版浏览器中工作。

Nicholas Gallagher 解释了原因：

Firefox < 3.5 将受益于使用 Thierry 的方法，并添加了 visibility:hidden 以隐藏插入的字符。这是因为旧版 Firefox 需要内容："." 避免在某些情况下（例如，jsfiddle.net/necolas/K538S/）在正文和它的第一个子元素之间出现额外的空间。

这就是为什么content它不是空的，剩下的三行（visibility和line-height）height是为了确保 clearfix 实际上不会在您的布局中占用空间。

实际上，Nicholas 做了一个新的 clearfix，它用更少的字节做同样的工作。在这里阅读：http: //nicolasgallagher.com/micro-clearfix-hack/

不过努力就好。:)

Answer 2

如果您想支持旧版浏览器，则需要更精细的 clearfix ：

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

如果您不关心对旧浏览器的支持，那么可以这样做：

.clearfix:after {
    content:"";
    display:table;
    clear:both;
}

Answer 3

该点用于旧版浏览器支持。如果不需要，可以使用“新”的。

这个答案实际上很好地解释了它。