Html 增加包含浮动嵌套 div 的父 div 的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9463069/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Grow height of parent div that contains floating nested divs
提问by Louis van Tonder
I can't seem to auto-grow my parent div's height based on its floating child divs. All the children are floating, to take up space horizontally, and then wrapping to the next line. There can be a changing number of floating children, and the parent has to auto-size its height. (The parent divserves as a background for all the floating divs). There is also a second divbelow the parent divthat needs to be pushed down, so that it is below the floating divs.
我似乎无法div根据浮动的 child divs自动增加我的 parent的高度。所有的孩子都是浮动的，水平占据空间，然后换行到下一行。浮动子项的数量可能会发生变化，并且父项必须自动调整其高度的大小。（父级div作为所有浮动divs的背景）。divparent 下方还有一秒div需要下推，使其位于浮动divs下方。
It's of major importance that the solution works in IE.
该解决方案在 IE 中工作非常重要。
回答by sandeep
If the parent container only has floating children, it will have no height. Adding the following CSS to the parent container should help:
如果父容器只有浮动子容器，则它没有高度。将以下 CSS 添加到父容器应该会有所帮助：
.parent {
overflow:hidden;
width: 100%;
}
Read this article for more: http://www.quirksmode.org/css/clearing.html.
阅读这篇文章了解更多信息：http: //www.quirksmode.org/css/clearing.html。
回答by Andreas Eriksson
You could insert a div that clears the floaters after the last child.
您可以插入一个 div 来清除最后一个孩子之后的漂浮物。
HTML:
HTML：
<div style="clear: both"></div> <!-- This goes after the last floated element - no floating elements are allowed on either side of this. -->
fiddle: http://jsfiddle.net/Rc5J8/
回答by Nils Kaspersson
You need to clearfloated elements the height of their parents will collapse.
您需要clear浮动元素的父母的高度会崩溃。
The current accepted answer is correct, however it's usually a better idea to clear floats by applying the clearfix hackor overflow: hiddento a wrapping parent element so that margins continue to functions as expected, and to get rid of an empty HTML element.
当前接受的答案是正确的，但是通过应用clearfix hack或overflow: hidden包装父元素来清除浮动通常是一个更好的主意，以便边距继续按预期运行，并摆脱空的 HTML 元素。
The overflow-method:
本overflow-方法：
CSS:
CSS：
.wrap { overflow: hidden }
.box { float: left; }
Markup:
标记：
<div class="wrap">
<div class="box">
Content
</div>
<div class="box">
Content
</div>
</div>
The clearfix-method, as linked above:
的clearfix-method，如上地连接：
CSS:
CSS：
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after { clear: both; }
.cf { *zoom: 1; }
.box { float: left; }
Markup:
标记：
<div class="wrap cf">
<div class="box">
Content
</div>
<div class="box">
Content
</div>
</div>
回答by Chtiwi Malek
Adding the overflowcss property on the parent element will fix the issue (no need for an empty & ugly div element to clear the float) :
overflow在父元素上添加css 属性将解决这个问题（不需要一个空的和丑陋的 div 元素来清除浮动）：
.parentelement {
overflow:auto;
display: block;
width: 100%;
}
I added the displayand widthproperties because some browsers will need theses properties to be defined.
我添加了display和width属性，因为有些浏览器需要定义这些属性。
回答by Adam Pope
You should use the clearfix technique on the containing div
您应该在包含 div 上使用 clearfix 技术
http://www.webtoolkit.info/css-clearfix.html
http://www.webtoolkit.info/css-clearfix.html
That removes the need to add extra markup.
这消除了添加额外标记的需要。
回答by wheresrhys
You need to apply clearfix to the parent as floats are removed from the flow of the document an don't automatically add any height to the parent's contents. Clearfix instructs teh parent to extend to a height tall enough to clear its last floated child. This methodis well established and works across browsers.
您需要将 clearfix 应用于父级，因为从文档流中删除了浮动，并且不会自动为父级的内容添加任何高度。Clearfix 指示父级扩展到足够高的高度以清除其最后一个浮动的子级。这种方法已经很好地建立并且可以跨浏览器工作。
