Html 如何使div在内部浮动的同时增加高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4604005/
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
How to make a div grow in height while having floats inside
提问by pedrozath
How can I make a div grow its height when it has floats inside of it? I know that defining a value for the width and setting overflow to hidden works. The problem is that I need a div with the overflow visible. Any ideas?
当 div 内部有浮动时，如何使 div 增长其高度？我知道定义宽度值并将溢出设置为隐藏作品。问题是我需要一个溢出可见的div。有任何想法吗？
回答by JakeParis
overflow:auto;on the containing div makes everything inside of it (even floated items) visible and the outer div fully wraps around them. See this example:
overflow:auto;在包含 div 上使其内部的所有内容（甚至是浮动项目）都可见，并且外部 div 完全环绕它们。看这个例子：
.wrap {
padding: 1em;
overflow: auto;
background: silver;
}
.float {
float: left;
width: 40%;
background: white;
margin: 0 1%;
}<div class="wrap">
<div class="float">Cras mattis iudicium purus sit amet fermentum. At nos hinc posthac, sitientis piros Afros. Qui ipsorum lingua Celtae, nostra Galli appellantur. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Ambitioni dedisse scripsisse iudicaretur.</div>
<div class="float">Mercedem aut nummos unde unde extricat, amaras. A communi observantia non est recedendum. Quisque ut dolor gravida, placerat libero vel, euismod. Paullum deliquit, ponderibus modulisque suis ratio utitur.</div>
</div>回答by Nikita Rybak
There's more than one way to clear floats. You can check some here:
http://work.arounds.org/issue/3/clearing-floats/
清除浮动的方法不止一种。你可以在这里查看一些：http:
//work.arounds.org/issue/3/clearing-floats/
E.g., clear:bothmight work for you
例如，clear:both可能对你有用
#element:after {
content:"";
clear:both;
display:block;
}
#element { zoom:1; }
回答by miphe
In many cases, overflow: auto;will be enough, but for the sake of completion and cross browser support, have a look at Clearfixwhich will do the job for all browsers.
在许多情况下，overflow: auto;就足够了，但为了完成和跨浏览器支持，请查看Clearfix，它将为所有浏览器完成这项工作。
Lets consider the following markup..
让我们考虑以下标记..
<div class="clearfix">
<div class="content">Content 1</div>
<div class="content">Content 2</div>
</div>
Along with the following styles..
随着以下风格..
.content { float:left; }
.content { float:left; }
.clearfix { ..from link.. }
.clearfix { ..from link.. }
Without the clearfix, the parent divwouldn't have a height due to it's floating children. The clearfix will make the parent consider the floating children.
如果没有 clearfix，父对象div将不会有高度，因为它是浮动的子对象。clearfix 将使父级考虑浮动子级。
回答by pedrozath
I figured that a great way to do it is setting display: tableon the div.
我认为一个很好的方法是display: table在 div 上设置。
