如何让div在内部具有浮动的情况下增长高度
如何让div在内部具有浮动的情况下增长高度
提问于 2011-01-05 20:32:21
当一个div内部有浮动的时候，我如何让它增长它的高度？我知道为宽度定义一个值并将overflow设置为隐藏是可行的。问题是我需要一个溢出可见的div。有什么想法吗？
回答 4
Stack Overflow用户
回答已采纳
发布于 2011-01-05 20:38:23
包含的div上的overflow:auto;使其中的所有内容(即使是浮动项)都可见，而外部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>
Stack Overflow用户
发布于 2011-01-05 20:34:52
清除浮点数的方法不止一种。您可以在此处查看以下内容：
http://work.arounds.org/issue/3/clearing-floats/
例如，clear:both可能适合你
#element:after {
content:"";
clear:both;
display:block;
}
#element { zoom:1; }Stack Overflow用户
发布于 2011-01-05 21:24:39
在许多情况下，overflow: auto;就足够了，但是为了完善和跨浏览器支持，请看一下Clearfix，它可以在所有浏览器上完成这项工作。
让我们考虑一下下面的标记。
<div class="clearfix">
<div class="content">Content 1</div>
<div class="content">Content 2</div>
</div>以及以下样式..
.content { float:left; }
.clearfix { ..from link.. }
如果没有clearfix，父div就不会有一个高度，因为它是浮动的子级。clearfix会让父进程考虑浮动子进程。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4604005
复制相关文章
相似问题