3

我在这里看到了这种完全不同的 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'ed 的元素吗？或者规则是否可以解释任何情况？

4

5 回答 5

24

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

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

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

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

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

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

反对它的一个边缘案例原因涉及 IE7： http: //www.satzansatz.de/cssd/onhavelayout.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;
}
于 2011-06-07T23:59:54.990 回答
4

这最终会清除您可能不一定想要 clearfix'ed 的元素吗？

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

于 2011-06-07T23:42:33.893 回答
2 
Are there any disadvantages to this method?

一种是在 < IE8 中是不够的，因为 'after' 元素没有得到很好的支持。更多关于CSS 技巧的内容

于 2011-06-07T23:54:11.377 回答
1

在Cascade Framework中，我在所有“块级”元素上使用了以下 clearfix：

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

div:after {
    clear: both;
}

div {
    *zoom: 1;
}

我从来没有遇到过这种技术的任何问题，除了在使用第三方 JS 库时的小问题......这可以通过“unclearfixing”父元素轻松修复。

就个人而言，我认为 clearfixed 块级元素使用起来更加直观，我真的不想再回到传统方式使用浮动。我认为默认情况下不清除所有块级元素的唯一原因是因为它是非标准行为，它可能会混淆其他人阅读您的代码。

如果您确实希望浮动元素的父级折叠，另一种策略是使用display: relative父级和display: absolute子级。到目前为止，我还没有遇到任何用例，其中该策略不适用于浮动元素的折叠父级。

于 2014-04-18T09:44:58.047 回答
0

在过去的几年里，我一直在全球范围内清除我的项目中的所有 div，这对我来说效果很好。在我使用 div 的大约 95% 的情况下，clearfix当应用于全球网站时，它的效果就像一个魅力。在某些情况下会出现潜在问题，我最终会撤消clearfix任何有问题的 div。我使用的 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;
    }
于 2016-12-13T03:05:20.853 回答