【发布时间】：2012-03-16 19:27:40
【问题描述】：
我似乎无法根据其漂浮的孩子divs 自动增加父母 div 的身高。所有的孩子都是浮动的，水平占用空间，然后换行到下一行。浮动子项的数量可能会发生变化，并且父项必须自动调整其高度。 （父 div 用作所有浮动 divs 的背景）。在父div下方还有第二个div需要下推，使其位于浮动divs下方。
解决方案在 IE 中运行非常重要。
【问题讨论】：
【发布时间】：2012-03-16 19:27:40
【问题描述】：
如果父容器只有浮动子容器，它将没有高度。将以下 CSS 添加到父容器应该会有所帮助：
.parent {
overflow:hidden;
width: 100%;
}
阅读本文了解更多信息：http://www.quirksmode.org/css/clearing.html。
【讨论】：
-
这可行，但如果您的元素还没有设置“显示：块”，您可能还需要该设置。但是，下面描述的 clearfix 技术绝对是首选：如果你有例如溢出：隐藏将不起作用。任何需要溢出的下拉菜单！
-
虽然我用的是同样的东西，但是当我们需要一些外部的内容时，我们如何实现同样的效果（意思是
overflow: visible;）？ -
这太棒了。但是如何它是如何工作的？链接的页面并没有真正的帮助。
你可以插入一个 div 来清除最后一个孩子之后的浮动。
HTML：
<div style="clear: both"></div> <!-- This goes after the last floated element - no floating elements are allowed on either side of this. -->
【讨论】：
-
没有更好的解决方案。现在我必须添加一个空的
div，它看起来像糟糕的 HTML。 -
将类 clear fix 应用于浮动元素并尝试以下 clearfix 类。 stackoverflow.com/questions/8554043/what-is-clearfix
-
如果您要对 div 中的元素使用 position:sticky，这就是您需要的答案，如果您使用 overflow:hidden/auto 方法，这将不起作用
你需要clear浮动元素的高度，他们的父母会崩溃。
当前接受的答案是正确的，但是通过将 the clearfix hack 或 overflow: hidden 应用于包装父元素来清除浮动通常是一个更好的主意，以便边距继续按预期工作，并摆脱空 HTML元素。
overflow-方法：
CSS：
.wrap { overflow: hidden }
.box { float: left; }
标记：
<div class="wrap">
<div class="box">
Content
</div>
<div class="box">
Content
</div>
</div>
clearfix-方法，如上链接：
CSS：
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after { clear: both; }
.cf { *zoom: 1; }
.box { float: left; }
标记：
<div class="wrap cf">
<div class="box">
Content
</div>
<div class="box">
Content
</div>
</div>
【讨论】：
-
所以
overflow:hidden是在容器没有固定高度时使容器增长以适应其浮动子项的方式。最后，这是overflow:auto的替代方案，它只应在容器具有固定高度时使用。感谢overflow:hidden提示。不幸的是，虽然它有效，但我找不到可以支持它的 W3C 参考。
【讨论】：
在父元素上添加overflow css 属性将解决问题（不需要一个空且丑陋的 div 元素来清除浮动）：
.parentelement {
overflow:auto;
display: block;
width: 100%;
}
我添加了 display 和 width 属性，因为某些浏览器需要定义这些属性。
【讨论】：
您需要对父级应用 clearfix，因为浮动从文档流中移除，并且不会自动为父级的内容添加任何高度。 Clearfix 指示父级扩展到足够高的高度以清除其最后一个浮动的子级。 This method 非常成熟，可以跨浏览器运行。
【讨论】：