css - 向所有 div 添加 clearfix 有什么缺点吗？

Question

在我正在处理的布局上（在大多数情况下不是这样），我想不出任何我不希望 div 不包含其浮动子级的实例。所以我在想，而不是为每个需要它的元素（主要是容器 div）添加一个 clearfix 类，为什么不让所有的 div 都像这样被 clearfixed：

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

这有什么缺点吗？在测试我当前的布局时，我真的看不到任何东西，但也许有一些知识渊博的人比我更了解。

score 3 · Accepted Answer

如果你这样做，那么你将永远无法让多个浮动div的 s 彼此水平堆叠，因为你的 clearfixes 会妨碍你。

所以在某种程度上，对每个div元素都有一个 clearfix 会使浮动它们以及相关元素的效果无效。

这就是为什么文章经常建议将 clearfix 应用于某个类，然后将所需的元素改为该类：

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

score 2 · Accepted Answer

在我看来，对于大多数使用它的情况来说，明确的修复是多余的，仅使用overflow: hidden.

显然，如果元素的尺寸设置小于其内容，或者您实际上希望子元素能够位于其父元素之外，那么这将不起作用。但是十有八九我发现溢出隐藏不会导致任何问题，而且实施起来更干净。

关于在每个 div 上设置明确的修复，我会远离这个。

然而，我已经构建了大量使用溢出隐藏而没有不良影响的布局。

2 回答 2