尽管像<div>这样的元素通常会增长以适应其内容，但使用float属性会导致CSS新手出现一个令人吃惊的问题：如果浮动元素具有非浮动的父元素，则父母将崩溃。
例如：
<div>
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>
此示例中的父div将不展开以包含其已浮动的子项 - 它将显示为height: 0。
我想在这里创建一个详尽的解决方案列表。如果您了解跨浏览器兼容性问题，请指出它们。
浮动父母。
<div style="float: left;">
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>
优点：语义代码。
缺点：您可能并不总是希望父级浮动。即使你这样做，你是否漂浮了父母的父母，等等？你必须浮动每个祖先元素吗？
为父母提供明确的身高。
<div style="height: 300px;">
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>
优点：语义代码。
缺点：不灵活 - 如果内容发生变化或浏览器调整大小，布局就会中断。
在父元素中添加“spacer”元素，如下所示：
<div>
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
<div class="spacer" style="clear: both;"></div>
</div>
优点：直接代码。
缺点：不是语义; spacer div仅作为布局黑客存在。
将父级设为overflow: auto。
<div style="overflow: auto;">
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>
优点：不需要额外的div
缺点：看起来像是黑客 - 这不是overflow财产的既定目的。
答案 0 :(得分：514)
最可靠和不引人注意的方法似乎是：
演示：http://jsfiddle.net/SO_AMK/wXaEH/
HTML：
<div class="clearfix">
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>
CSS：
.clearfix::after {
content: " ";
display: block;
height: 0;
clear: both;
}
通过一点CSS定位，您甚至无需向父DIV添加课程。
此解决方案向后兼容IE8，因此您无需担心旧版浏览器失败。
建议对解决方案1进行调整，如下：
演示：http://jsfiddle.net/wXaEH/162/
HTML：
<div class="clearfix">
<div style="float: left;">Div 1</div>
<div style="float: left;">Div 2</div>
</div>
CSS：
.clearfix::after {
content: " ";
display: block;
height: 0;
clear: both;
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div class="ie7-clear"></div>' );
}
.ie7-clear {
display: block;
clear: both;
}
此解决方案似乎向后兼容IE5.5但尚未经过测试。
还可以设置display: inline-block;和width: 100%;来模拟正常的块元素，而不会崩溃。
演示：http://jsfiddle.net/SO_AMK/ae5ey/
CSS：
.clearfix {
display: inline-block;
width: 100%;
}
此解决方案应向后兼容IE5.5，但仅在IE6中进行了测试。
答案 1 :(得分：71)
我通常使用overflow: auto技巧;虽然严格来说，这不是溢出的预期用途，但 有点相关 - 足以使其易于记忆，当然。在本例IMO中，float: left本身的含义已经扩展到各种用途，而不是溢出。
答案 2 :(得分：20)
不是将overflow:auto放在父级上，而是放置overflow:hidden
我为任何网页编写的第一个CSS总是：
div {
overflow:hidden;
}
然后我再也不用担心了。
答案 3 :(得分：18)
当浮动元素位于容器框内时，问题就会发生，该元素不会自动强制容器的高度调整到浮动元素。当一个元素浮动时，它的父元素不再包含它，因为浮动元素从流中移除。您可以使用2种方法来修复它：
{ clear: both; } clearfix 一旦了解了发生的情况，请使用以下方法“清除”它。
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
<强> Demonstration :)
答案 4 :(得分：14)
clearfix有多个版本，其中 Nicolas Gallagher 和 Thierry Koblentz 为关键作者。
如果您想要支持旧浏览器，最好使用此clearfix：
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
在SCSS中，您应该使用以下技术：
%clearfix {
&:before, &:after {
content:" ";
display:table;
}
&:after {
clear:both;
}
& {
*zoom:1;
}
}
#clearfixedelement {
@extend %clearfix;
}
如果您不关心对旧浏览器的支持，那么版本较短：
.clearfix:after {
content:"";
display:table;
clear:both;
}
答案 5 :(得分：9)
虽然代码不是完全语义的，但我认为在每个容器的底部都有一个我称之为“清除div”的浮点数更直接。事实上，我在每个项目的重置块中都包含以下样式规则：
.clear
{
clear: both;
}
如果你是IE6的样式（上帝帮助你），你可能想要给这个规则一个0px的行高和高度。
答案 6 :(得分：9)
理想的解决方案是将inline-block用于列而不是浮动。我认为如果你遵循（a）仅将inline-block仅应用于通常为内联的元素（例如span），浏览器支持是相当不错的。 （b）为Firefox添加-moz-inline-box。
在FF2中检查你的页面也是因为我在嵌套某些元素时遇到了很多问题（令人惊讶的是，这是IE执行得比FF好得多的一种情况）。
答案 7 :(得分：9)
奇怪的是没有人为此提出一个完整的答案，啊，这就好了。
添加样式为clear的块元素：both;在它上面将清除浮点数超过该点并停止该元素的父级崩溃。 http://jsfiddle.net/TVD2X/1/
优点：允许您清除元素，下面添加的元素不受上面浮动元素和有效css的影响。
缺点：需要另一个标记来清除浮点数，膨胀标记。
注意：要回退到IE6并使其处理弃权父母（即输入元素），您将无法使用：after。
添加display：table;到父母那里，让它从花车上耸耸肩，并以正确的高度展示。 http://jsfiddle.net/h9GAZ/1/
优点：没有额外的加价，而且更加整洁。适用于IE6 +
缺点：需要无效的CSS以确保IE6和7中的一切都很好。
注意：IE6和7宽度自动用于防止宽度为100％+填充，而在较新的浏览器中则不然。
这些修补程序可以恢复到支持最低的浏览器，全局使用率超过1％（IE6），这意味着使用：之后不会删除它。
隐藏溢出确实显示内容，但不会阻止元素崩溃，因此不会回答问题。使用内联块可能会产生错误结果，孩子有奇怪的边距等等，表格要好得多。
设置高度可以“防止”崩溃，但这不是一个正确的修复。
无效的CSS从不伤害任何人，事实上，它现在已经成为常态。使用浏览器前缀与使用浏览器特定的黑客一样无效，并且不会影响最终用户。
我使用上述两种解决方案来使元素做出正确反应并相互配合，我恳请你也这样做。
答案 8 :(得分：6)
我在适用的地方使用2和4（即当我知道内容的高度或溢出不会造成伤害时）。在其他任何地方，我都使用解决方案3.顺便说一下，你的第一个解决方案没有超过3的优势（我可以发现），因为它不再具有语义，因为它使用相同的虚拟元素。
顺便说一句，我不会担心第四个解决方案是黑客攻击。只有当他们的潜在行为需要重新解释或其他变化时，CSS中的黑客才会有害。这样，你的黑客就无法保证工作。但是在这种情况下，你的hack依赖于overflow: auto的确切行为。搭便车是没有害处的。
答案 9 :(得分：5)
我最喜欢的方法是使用clearfix类作为父元素
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
答案 10 :(得分：4)
最着名的解决方案之一是使用伪元素而非非语义html元素的解决方案编号3的变体。
它是这样的......
.cf:after {
content: " ";
display: block;
visibility: hidden;
height: 0;
clear: both;
}
将它放在样式表中，您只需要将“cf”类添加到包含浮点数的元素中。
我使用的是来自Nicolas Gallagher的另一种变体。
它做同样的事情，但它更短，看起来更整洁，并且可能习惯于完成另一件非常有用的事情 - 防止子元素的边缘与其父母一起崩溃（但为此你确实需要别的东西 - 阅读更多关于它http://nicolasgallagher.com/micro-clearfix-hack/）。
.cf:after {
content: " ";
display: table;
clear: float;
}
答案 11 :(得分：3)
在底部的父div中添加它
<div style="clear:both"></div>
答案 12 :(得分：2)
将溢出更改为auto或hidden时可能会遇到的主要问题是，所有内容都可以使用鼠标中键滚动，用户可能会弄乱整个网站布局。
答案 13 :(得分：2)
我认为另一种可能在语义上更正确的解决方案是将浮动的内部元素更改为“display：inline”。这个例子和我在遇到这个页面时所做的工作都使用浮动div，其方式与使用span的方式完全相同。而不是使用div，切换到span，或者如果您正在使用默认情况下的另一个元素'display：block'而不是'display：inline'，则将其更改为'display：inline'。我相信这是100％语义正确的解决方案。
解决方案1，浮动父级，实质上是要更改要浮动的整个文档。
解决方案2，设置一个明确的高度，就像画一个框并说我想在这里放一张图片，即如果你正在做一个img标签就用它。
解决方案3，添加间隔物以清除浮动，就像在内容下方添加额外的线条一样，也会混淆周围的元素。如果使用此方法，您可能希望将div设置为height：0px。
解决方案4，溢出：自动，确认您不知道如何布置文档，并承认您不知道该怎么做。
答案 14 :(得分：0)
我认为最好的方法是将clear:both设置为即将发布的元素。
原因如下：
1）IE6 / 7中不支持:after选择器，FF3中不支持错误，但是，
如果你只关心IE8 +和FF3.5 +清除：以后可能最适合你...
2）overflow应该做其他事情，所以这个黑客不够可靠。
作者请注意：清除时没有任何问题......清除意味着跳过浮动字段。 CLEAR与我们在一起，因为HTML3（谁知道，甚至可能更长）http://www.w3.org/MarkUp/html3/deflists.html，也许他们应该选择一个不同的名称，如page：new，但那只是一个细节......