元素不扩展父元素高度

Question

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

也许我的CSS不正确，但我无法弄清楚在哪里。 长选择列表和主要描述应位于上部白色框中。

这是一个小提琴 。

编辑：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;
}

Answer 1

清除浮子的方法有很多种; 简单地追加overflow: hidden; 到.main将解决您的问题。

但实际上，最好直接清除导致问题的浮点数，而不是将修复程序应用于父div。 我实际上建议将以下属性添加到.bottom：

.bottom {
    clear: both;
    overflow: hidden;
}

• clear: both负责清除.content的浮动。
• overflow: hidden负责清除.bottom的浮动

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