Question

您知道这个古老的问题：包含浮动元素的容器不会自动扩展其高度以包围其子项。

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

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

根据this guide，这两种方法兼容所有当今重要的浏览器。

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

这里有一个非常相似的问题：What is the different between clearfix hack and overflow:hidden vs overflow:auto? 但问题并没有真正回答那里。

Answer 1

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

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

Overflowing a container div horizontally but not vertically

那里的问题是：

这里有一个固定的高度：http://jsfiddle.net/je8aS/2/
没有固定高度：http://jsfiddle.net/thirtydot/je8aS/5/
如何在不使用固定高度的情况下清除浮子？
overflow: hidden不起作用：http://jsfiddle.net/thirtydot/je8aS/6/
您必须使用其他一些清除浮动的方法，例如clear: both：
http://jsfiddle.net/je8aS/3/
clearfix class也有效：http://jsfiddle.net/thirtydot/je8aS/11/

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

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

这并不是说clearfix是唯一的替代方案 - display: inline-block干净地修复了这个例子：

http://jsbin.com/ubapog

Answer 2

正如在另一个回答中所提到的那样，hidden的缺点是，它会出人意料地隐藏下拉菜单等内容。但是，通过浮动父容器，还有另一种方法可以包含一行。这通常适用于overflow: hidden有缺点的地方，并且浮动也有助于解决许多遗留IE问题，尤其是在列表中。如果你可以使用宽度，那么我会使用“浮在浮动中”或display: inline-block。

我不是说“clearfix”没有用 - 但对我而言，它在CMS主题（如Wordpress和Drupal）中已经过于根深蒂固，我认为在很多情况下它会被过多地使用而且对于不喜欢实际上需要清除或包含。

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

<强>加入这又刚刚出现了：大脑没有处于假日模式......

我真的开始认为是的， clearfix是没有必要的（至少我还没有找到它的例子）甚至@ thirtydot上面的例子可以解决{{ 1}}并且仍然支持IE6，具有固定宽度的容器具有IE7及以下hasLayout要求，并且通过使其成为所有其他浏览器的内联块，它可以居中并且“偏移”粘贴元素将起作用容器确实垂直拉伸

Example

我还看到在clearfix hack中使用display: inline-block以及:before来折叠边距的新改进的clearfix，但除非我遗漏了the demo is flawed - :after元素中存在不均匀的空格，“clearfixed”框实际上不包含任何浮点数，只要将元素浮动到其中，每个方法都执行相同的操作。

请注意pre元素上的边距与其他元素的反应不一样（所以尝试使用填充而不是边距来测试时看到相同的图片）..并且还有另一个IE“foible”如果没有明确指定，IE不包含正确的边距，并且在演示中pre而不是h2上有明确的边距，所以所有的东西都是一个明确的元素，如演示的该页面中的TJK是人为地强制在正常块元素上包含边距，就像1px顶部/底部填充一样，因为浏览器无论如何都会这样做！

如果你这样做，那么将元素浮动到那些容器中（无论如何都要清除） - 边距确实包含你可能想要的那些，就像它们在新的块格式化上下文中那样 - 没有任何额外的{{ 1}}部分到黑客，所有clearfix变体同样有效！

<强> See the demo reloaded

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

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

更好的替代方案

如果可以应用宽度   元素包含浮点数，然后你的   最好的选择是使用：

p :before

我认为这是公平的，甚至可能需要填充的100％元素，你可以与display: inline-block;

一起使用

width: <any
  explicit value>;

Answer 3

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

Answer 4

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

创建了flow和flow-root inner display types 更好地表达流程布局display types并创建一个显式切换使元素成为BFC根。（这应该消除了::after { clear: both; }和{H}等黑客攻击的需要 overflow: hidden旨在实现此目的。）

现在，正确的方法是

display: flow-root;

可悲的是，这是最近添加的内容，因此浏览器还没有实现它。

Answer 5

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

Answer 6

我最近惊喜地发现overflow:hidden现在完美无缺。直到大约6个月前我一直在使用clearfix方法，相比之下，这是非常臃肿的。

Answer 7

注意：如果您只是进行测试，请确保您拥有正确的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>

Answer 8

我不会说不推荐使用clearfixing。但是，我想说目前使用的clearfix的大多数版本已经过时了。

According to the experts，这是您今天应该使用的版本：

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

是不是弃用了clearfix？

8 个答案:

Example