49

你知道一个古老的问题：包含浮动元素的容器不会自动扩展它们的高度来包围它们的子元素。

解决此问题的一种方法是“clearfix”，它添加了许多 CSS 规则以确保容器正确拉伸。

但是，仅提供容器overflow: hidden似乎也可以正常工作，并且具有相同数量的浏览器兼容性。

根据本指南，这两种方法在当今重要的所有浏览器中都兼容。

这是否意味着“clearfix”已被弃用？使用它还有什么优势overflow: hidden吗？

这里有一个非常相似的问题：clearfix hack 和 overflow:hidden vs overflow:auto 有什么区别？ 但是那里并没有真正回答这个问题。

4

8 回答 8

32

你几乎可以overflow: hidden一直使用。

但是，也有例外。这是一个例子：

水平溢出容器 div 但不垂直溢出

那里的问题是：

这是一个更重要的示例，说明您何时无法使用overflow: hidden：

http://fordinteractive.com/misc/overflow/

这并不是说 clearfix 是唯一的选择 -display: inline-block干净地修复了该示例：

http://jsbin.com/ubapog

于 2011-04-06T12:10:07.323 回答
10

正如另一个答案中提到的那样，不利的hidden一面是它会令人惊讶地隐藏诸如下拉菜单之类的东西。但是，还有另一种方法是通过浮动父容器来包含一行。这通常适用于overflow: hidden有缺点的地方，并且浮动也有助于解决许多遗留的 IE 问题，尤其是在列表中。如果您可以使用宽度，那么我将使用“浮动中的浮动”，或者display: inline-block.

我并不是说“clearfix”没有用——但对我来说，它在 CMS 主题（如 Wordpress 和 Drupal）中根深蒂固，我认为在很多情况下它使用得太多，而且在实际上不需要的 div 上被清除或遏制。

我实际上无法想到我不能在 clearfix 上使用溢出或浮动的情况，但我的大脑处于假日模式 - 但因为它，clearfix，是一种复制/粘贴解决方案，有时是最容易推荐的东西，但是它必须是为 IE 设置 hasLayout 的那个，当然现在溢出和浮动也是如此。

补充说 这又出现了：大脑不在假期模式..

我真的开始认为是的，clearfix 不是必需的（至少我还没有找到它所在的示例）即使上面的@thirtydot 示例也可以使用display: inline-block并且仍然支持 IE6，容器具有固定宽度具有 IE7 及以下的 hasLayout 要求，并且通过使其成为所有其他浏览器的内联块，它可以居中，并且当容器垂直拉伸时，“偏移”粘性元素可以正常工作

例子

我还看到了对那些使用 :before以及:after在 clearfix hack 中折叠边距的新改进 clearfix 的引用，但除非我遗漏了什么，否则 演示存在缺陷 -pre元素和“clearfixed”框中的空白不均匀实际上不包含任何浮点数，只要您浮动其中的元素，每个方法都会执行相同的操作。

请注意，元素上的边距与pre其他元素的反应并不相同（因此在测试时尝试使用填充而不是边距以查看相同的图片）.. 还有另一个 IE“缺陷”，即 IE 不正确包含边距它们没有明确指定，并且在演示中有明确的边距，h2但不是p所有的东西都等于 TJK 在该页面中演示的 clearfixed 元素，人为地强制包含正常块元素上的边距，与 1px 顶部/底部填充的方式非常相似，因为浏览器无论如何都会以不同的方式执行此操作！

如果您这样做，则将元素浮动在这些容器内（无论如何都要清除）-边距确实包含您可能希望它们包含的内容，就像在新的块格式化上下文中一样-没有任何额外:before的黑客部分，所有 clearfix 变体都同样有效！

查看重新加载的演示

所以在我看来，不再需要这种“clearfix”方式，只需找到创建新块格式上下文的最佳方法，使用旧版 IE 的 haslayout .. 两者的属性是相同的！

正如 TJK 在他的文章中指出的那样：http ://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/

更好的选择

如果您可以将宽度应用于包含浮动的元素，那么您最好的选择是使用：

display: inline-block; width: <any explicit value>;

我认为这是公平的，即使 100% 的元素可能需要填充，您也可以结合使用box-sizing

.clearfix {
  display: inline-block;
  width: 100%;
  *width: auto;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
于 2011-04-06T12:05:00.693 回答
8

overflow:hidden非常“强大”（我已经使用了几年，我同意大卫所说的话）但同时也暴露了一个问题。如果即在容器内，您必须将一些 abs 元素拖放到容器外，您将无法在容器外看到它们。在这种特殊情况下，您需要使用“clearfix”技巧；）

于 2011-04-06T11:42:00.723 回答
2

是的，它已被CSS Display L3 “弃用” ：

创建flow和内部显示类型 以更好地表达流布局显示类型并创建显式开关以使元素成为BFC根。（这应该消除对旨在实现此目的的黑客攻击的需要。） flow-root ::after { clear: both; }overflow: hidden

所以现在，正确的方法是

display: flow-root;

遗憾的是它是最近添加的，所以浏览器还没有实现它。

于 2015-08-12T01:20:48.077 回答
1

最近，我惊喜地发现，overflow:hidden现在可以完美运行。直到大约 6 个月前，我一直在使用 clearfix 方法，相比之下它相当臃肿。

于 2011-04-06T11:47:36.793 回答
1

多年来，我一直在推荐这种overflow: hidden方法。它得到了广泛的支持。

于 2011-04-06T11:38:44.307 回答
1

注意：如果您只是在测试，请确保您设置了正确的 DOCTYPE。抓了我几次，我总是忘记！

例如，在 IE9 中，如果没有<!DOCTYPE html>顶部，以下内容将无法正常工作。

<!DOCTYPE html>
<html>

<style>

#bottom_panel {
    overflow: hidden;
    background: orange;
    border:1px solid red;
}

#bottom_panel .col1 {
    background: red;
    float: left;
    width: 100px
}

#bottom_panel .col2 {
    background: yellow;
    float: left;
    width: 70px
}

#bottom_panel .col3 {
    background: green;
    float: left;
    width: 150px
}

.clear {
    clear: both;
}

</style>

<div id="bottom_panel">

    <div class="col1">this is col 1</div>
    <div class="col2">this is col 2. It's taller than the other columns because it's got more text in ot</div>
    <div class="col3">this is col 3</div>

</div>

<div>
This should not be floating around! Should be underneath the columns!
</div>

</html>
于 2011-04-27T05:09:10.657 回答
1

我不会说 clearfixing 已被弃用。但是，我会说当前使用的大多数版本的 clearfix 都已过时。

根据专家的说法，这是您今天应该使用的版本：

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
于 2016-01-18T05:24:17.047 回答