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

清理花车并不是一件很复杂的事情。

应该根据具体情况进行处理，而不是 sledge-hammered 处理“每个”元素。

这样做会回来以一些的方式咬你，我很有信心。

首先，我同意@ Guffa的回答。

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

zoom: 1是向元素提供hasLayout内容的常用方法。将hasLayout应用于元素可修复某些类型的渲染问题，但它也可能导致其他问题。来自链接文档的引用：

不要给所有人布局。这种集中的毒药，它的布局不是治愈方法从根本上改变渲染。

我个人喜欢使用overflow: hidden方法来包含浮点数。那个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;
}

Answer 2

这最终能否解决问题你可能不一定的元素想要clearfix'ed吗？

是。我不希望每个div元素被清除。

Answer 3

Are there any disadvantages to this method?

其中一个是＆lt; IE8，因为'after'元素不是很好支持。有关CSS tricks

的更多信息

Answer 4

在Cascade Framework中，我在所有＆＃34;块级＆＃34;上使用以下clearfix;要素：

div:after {
    content: "";
    display: table;
}

div:after {
    clear: both;
}

div {
    *zoom: 1;
}

我从来没有遇到过这种技术的任何问题，除了使用第三方JS库时的小怪癖...这可以通过＆＃34; unclearfixing＆＃34;轻松解决。父元素。

就我个人而言，我认为明确的块级元素更直观易用，我真的不想再以传统的方式使用浮点数了。默认情况下，我看到不清除所有块级元素的唯一原因是因为它的非标准行为，它可能会混淆其他读取代码的人。

如果您确实希望浮动元素的父级可以折叠，则另一种策略是将display: relative用于父级，将display: absolute用于子级。到目前为止，我还没有遇到任何用例，这个策略不适合浮动元素的折叠父项。

Answer 5

在我的项目中，过去几年我一直在全球范围内清除所有div，这对我来说非常有用。在我使用div的大约95％的情况下，clearfix在应用于全球网站时就像魅力一样。肯定会出现潜在问题的情况，最终我会针对任何有问题的div撤消clearfix。我使用的CSS声明是：

div:after {
    clear: both;
    margin: 0;
    padding: 0;
    display: table;
    font-size: 0;
    line-height: 0;
    content: ' ';
    visibility: hidden;
    overflow: hidden;
    }
div {
    *zoom: 1;
    }

“有史以来最好的clearfix？”

5 个答案: