clearfix 是否已弃用？-解网

问：

您已经意识到一个由来已久的问题：包含浮动元素的容器不会自动扩展其高度以包围其子元素。

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

但是，仅提供容器似乎也同样有效，并且具有相同数量的浏览器兼容性。overflow: hidden

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

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

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

HTML CSS 清除修复

FWIW，严格来说，我认为这两种方法都是黑客。不过，我建议几乎一直使用 overclearfix，因为它更干净。请注意，归根结底，创建一个新的 BFC 允许一个盒子包含其浮点数的事实仍然只不过是一个副作用，而不是的最初预期目的。记住，伙计们，它被称为，不是或类似的东西。overflowoverflow: hiddenoverflowoverflowfloat-contain

0赞 BoltClock 1/2/2013

如果您对此类行为的原因感兴趣，这些答案可能值得一读：为什么 overflow： hidden 会产生意想不到的副作用，即高度增加以包含浮动元素？以及为什么 CSS2.1 定义了“可见”以外的溢出值来建立新的块格式上下文？overflow

3赞 Baumr 1/6/2013

这似乎更好，但为什么 HTML5 样板的人们仍然使用它呢？overflow: hidden.clearfix { *zoom: 1; }

答：

1赞 Quentin 4/6/2011 #1

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

我链接到的“clearfix”解决方案使用了很多特定于浏览器的 CSS，并避免了使用额外的元素。我不明白的是，为什么他们一直都经历过这种情况。我怀疑这是 IE5 等早期浏览器的兼容性问题。无论如何，如果在任何地方都有效，就没有理由再使用其他任何东西了。谢谢:afteroverflow: hiddenhidden

0赞 Quentin 4/6/2011

好吧，我显然很累，做了太多的假设。我喜欢星期三发布。编辑了答案，所以它没有提到不相关的东西。

8赞 stecb 4/6/2011 #2

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

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

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

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

添加这个刚刚再次出现：大脑不在假期模式。

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

例

我还看到了对那些使用和 clearfix hack 折叠边距的新改进的 clearfix 的引用，但除非我遗漏了一些东西，否则演示是有缺陷的 - 元素中有不均匀的空白，并且“clearfixed”框实际上不包含任何浮点数，只要您浮动其中的元素，每个方法的执行方式相同。:before:afterpre

请注意，无论如何，元素上的边距反应与其他元素的反应不同（因此请尝试使用填充而不是边距，以便在测试时看到相同的图片）。还有另一个 IE“弱点”，即 IE 没有明确指定边距，则 IE 不会正确包含边距，并且在演示中有明确的边距，但不是，所以在所有条件都相等的情况下，TJK 在该页面中演示的明确固定元素人为地强制将边距包含在普通块元素上，与 1px 顶部/底部填充的方式大致相同，因为浏览器无论如何都以不同的方式执行此操作！preh2p

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

查看重新加载的演示

因此，在我看来，不再需要这种“清除”方式，只需找到创建新块格式上下文的最佳方法，使用旧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;
}

32赞 thirtydot 4/6/2011 #5

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

但是，也有例外。下面是一个示例：

水平而非垂直地溢出容器 div

问题是：

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

下面是一个更重要的例子，说明什么时候你不能使用：overflow: hidden

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

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

http://jsbin.com/ubapog

<!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>

2赞 Oriol 8/12/2015 #7

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

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

所以现在，正确的方法是

display: flow-root;

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

1赞 user5803163 1/18/2016 #8

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

据专家介绍，这是您今天应该使用的版本：

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

上一个：PHPUnit 测试的“Web 界面”？

下一个：在 PHP/Apache/Linux 环境中，为什么 chmod 777 是危险的？

clearfix 是否已弃用？

Is clearfix deprecated?

评论

评论

评论

例

评论