更新时间:2022-03-14 22:18:02
解决具有浮动元素的元素的容器高度的错误计算的一种方法是把溢出:隐藏在他们上面。发生错误计算是因为在计算容器DIV的高度时内部布局尚未准备好。 overflow:在容器上隐藏DIV在渲染所有子代之后强制重新计算高度。
One method to solve the miscalculation of container height of elements having floating children is to put overflow:hidden on them. The miscalculation occurs because at the time of calculating the height of container DIV the inside layout is not ready. overflow:hidden on container DIV forces recalculation of the height after all children are rendered.
<div class="container">
<div class="child">
Lorem ipsum
</div>
<div class="child">
Lorem ipsum
</div>
<div class="child">
Lorem ipsum
</div>
.container{
overflow:hidden;
}
.child{
float:left;
width:20px;
}
这将导致问题只有在你有一些元素绝对或相对定位实际上是放在容器外面,像一些横幅和丝带。否则这是一个干净的解决方案。
This will cause problem only in palces where you have some elements absolutely or relatively positioned that is actually placed outside container, like some banners and ribbons. Otherwise this is a clean solution.
PPK上有一篇文章 http://www.quirksmode.org/css/clearing.html
PPK has one article on it http://www.quirksmode.org/css/clearing.html