是不赞成clearfix？
您已经意识到了这个古老的问题：包含浮动元素的容器不会自动扩展高度以封闭子女。
解决这个问题的一个方法是“clearfix” ，它添加了一些CSS规则来确保容器正确拉伸。
然而，只是给容器overflow: hidden似乎工作，以及与浏览器兼容性相同的数量。
根据本指南 ，这两种方法都适用于当今所有重要的浏览器。
这是否意味着“clearfix”已被弃用？ 使用overflow: hidden还有什么好处overflow: hidden ？
这里有一个非常类似的问题： clearfix hack和overflow有什么区别：hidden vs overflow：auto？ 但这个问题在这里并没有真正的答案。
你几乎可以使用overflow: hidden所有的时间。
但是，也有例外。 这是一个例子：
溢出一个容器div水平，但不是垂直
那里的问题是：
- 这里有一个固定的高度： 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类也可以工作： http : //jsfiddle.net/thirtydot/je8aS/11/
以下是不能使用overflow: hidden的一个更重要的例子overflow: hidden ：
http://fordinteractive.com/misc/overflow/
这并不是说clearfix是唯一的select – display: inline-block干净地修复了这个例子：
正如在另一个答案中提到的， hidden的缺点是它会令人惊讶地隐藏下拉菜单等东西。 但是另一种方法是通过浮动父容器来包含一行。 这通常在overflow: hidden有一个缺点，浮动也有很多遗留的IE问题，特别是在列表中。 如果你可以使用一个宽度，那么我会使用“浮动浮动”，或display: inline-block 。
我并不是说“clearfix”没有用处，但对我来说，它太广泛地被固定到CMS主题（如Wordpress和Drupal）中，我认为在很多情况下，它使用太多了，而对于实际上并不需要的div被清除或包含。
我实际上无法想到一种情况，我不能使用overflow或float，over clearfix，但是我的大脑处于假日模式 – 但是，因为它，clearfix是复制/粘贴解决scheme，有时是最容易推荐的方法，但是它必须是为IE设置hasLayout的，这当然也是溢出和浮动。
加了这个又刚刚出来了：脑子不在假期模式..
我真的开始思考是的， clearfix是没有必要的 （至less我还没有find一个例子），甚至@ thirtydot上面的例子可以解决display: inline-block ，仍然有IE6的支持，具有固定宽度的容器具有IE7及其以下的版面要求，并且通过使其对于所有其他浏览器的内嵌块可以居中并且“偏移”粘贴出元素将工作得很好，而容器不会垂直拉伸
例
我也看到了一个新的改进的clearfix用于折叠边缘使用:before和:after在clearfix黑客中，但除非我错过了一些演示是有缺陷的 – pre元素中有不均匀的空白， “clearfixed”框实际上并不包含任何浮点数，只要将浮点数放在浮点数中，每个方法都执行相同的操作。
注意pre元素上的边距与其他元素的反应不一样（所以试试用padding代替margin来在testing时看到相同的图片）。另外还有一个IE“弱点”，IE不包含边界如果他们没有明确指定，在演示中有明确的利润在h2但不是p因此所有东西都等同于TJK在该页面中演示的一个明确的元素是人为地强制遏制正常的边际块元素，就像1px顶部/底部填充一样，因为浏览器做这个不同的方式！
如果你这样做，然后漂浮在这些容器内部的元素（无论如何都是清除点） – 边界然后包含，因为你可能会喜欢他们，如果他们会在一个新的块格式上下文没有任何额外的:before黑客，所有的修补程序的变化工作同样好！
看演示重新加载
所以在我看来，没有必要再使用这个“clearfix”了，只需find创build新的块格式化上下文的最佳方式，使用旧版IE的haslayout ..两者的属性是相同的！
正如TJK在他的文章中所指出的： http ://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/
更好的select
如果您可以将宽度应用于包含浮动元素的元素，那么您最好的select是使用：
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; }
overflow:hidden是非常'强大的'（我已经使用了好几年了，我同意大卫说的），但同时也暴露了一个问题。 如果在容器内有一些abs元素，你必须将它拖放到容器外面，否则你将无法在容器外面看到它们。 在这个特殊的情况下，你需要使用'clearfix'技巧;）
是的，这是由CSS显示 “不赞成” L3 ：
创build
flow和flow-root内部显示types，以更好地表示stream布局显示types，并创build一个明确的开关，使元素成为BFC根。 （这应该消除像::after { clear: both; }和overflow: hidden类的黑客需要完成此目的的需要。）
所以现在，正确的方法是
display: flow-root;
不幸的是，这是最近的增加，所以浏览器还没有实现。
我一直在推荐overflow: hidden方法多年。 它得到广泛的支持。
我最近发现我的惊喜overflow:hidden作品现在完美无缺。 直到六个月前，我一直在使用clearfix方法，而且相比之下，这个方法相当臃肿。
注意：如果你只是testing，确保你有正确的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>
我不会说clearfixing已被弃用。 但是，我会说目前正在使用的clearfix的大多数版本已经过时。
据专家介绍 ，这是你今天应该使用的版本：
.clearfix:after { content: ""; display: table; clear: both; }
