增加包含浮动嵌套div的父div的高度

我似乎无法自动增长我的父母div的高度基于其浮动子div。 所有的孩子都漂浮着，占据空间，然后包裹到下一行。 可以有不断变化的stream动孩子数量，父母必须自动调整身高。 （父div作为所有浮动div的背景）。 在父div下面还有第二个div，需要向下推，这样才能在浮动div下面。

这个解决scheme在IE中是非常重要的。

Answer 1

你可以插入一个div来清除最后一个孩子之后的浮动元素。

HTML：

<div style="clear: both"></div> <!-- This goes after the last floated element - no floating elements are allowed on either side of this. --> 

小提琴： http : //jsfiddle.net/Rc5J8/

Answer 2

如果父容器只有浮动子，则没有高度。 将以下CSS添加到父容器应该有所帮助：

 .parent { overflow:hidden; width: 100%; } 

阅读这篇文章的更多信息： http ： //www.quirksmode.org/css/clearing.html 。

Answer 3

你需要clear浮动的元素，他们的父母的高度将崩溃。

当前接受的答案是正确的，但通过应用clearfix hack或overflow: hidden清除浮动通常是一个更好的主意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 -method，如上所链接：

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> 

Answer 4

你应该在包含div上使用clearfix技术

http://www.webtoolkit.info/css-clearfix.html

这消除了添加额外的标记的需要。

Answer 5

在父元素上添加overflow css属性可以解决这个问题（不需要一个空＆丑陋的div元素来清除浮点数）：

 .parentelement { overflow:auto; display: block; width: 100%; } 

我添加了显示和宽度属性，因为一些浏览器将需要定义这些属性。

Answer 6

您需要将clearfix应用于父级，因为浮动元素将从文档stream中移除，而不会自动向父级内容添加任何高度。 Clearfix指示父对象的高度足以清除最后一个浮动的子对象。 这种方法已经很完善，可以在各种浏览器中使用。