如何使一个 div 增长的高度，同时有浮动内

当 div 内部有浮点数时，如何让 div 增长其高度？我知道为宽度定义一个值并将溢出设置为隐藏工作。问题是我需要一个溢出可见的 div。有什么想法吗？

82580 次浏览
小开

有不止一种方法可以清除浮动。你可以在这里查看一些:
Http://work.arounds.org/issue/3/clearing-floats/

例如，clear:both可能对你有用

#element:after {
content:"";
clear:both;
display:block;
}


#element { zoom:1; }
小开
最佳答案

包含 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>

小开

在许多情况下，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 会让父级考虑浮动的子级。

小开

我认为一个很好的方法是在 div 上设置 display: table。


提交答案