元素不扩展父元素高度

时间:2012-06-10 06:19:01

标签: css html containers parent-child

我有一个容器,其中我放了一堆元素,我的期望是当容器充满元素时容器会向下扩展。不幸的是,这种情况并非如此。我有一些div漂浮在我的容器边缘。我能用一堆破坏标签来解决这个问题,但这是一个草率的解决方案。

也许我的CSS不正确,但我无法弄清楚在哪里。长选择列表和主要说明位于上方白框中。

这是Fiddle

编辑:Uwe带我去研究花车。我发现在正常流程布局中不考虑浮动。那怎么可以解决这个问题?

编辑2:我找到了一个clearfix解决方案。

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}
* html .clearfix {
    height: 1%;
} /* Hides from IE-mac \*/
    .clearfix {
        display: block;
}

1 个答案:

答案 0 :(得分:3)

清除花车的方法有很多种;只需将overflow: hidden;附加到.main即可解决您的问题。

在实践中,最好直接清除导致问题的浮动,而不是将修复应用于父div。我实际上建议将以下属性添加到.bottom中:

.bottom {
    clear: both;
    overflow: hidden;
}
  • clear: both负责清除.content中的花车。
  • overflow: hidden负责清除.bottom
  • 中的花车

除了HTML标记的class属性之外,您还应该考虑使用id属性。