为什么我的“容器”div不包含我的浮动元素？

Question

我正在为我的学校“数学接力赛”创建一个网站。

我有一个" container“div (白色背景)，然后是容器内的顶部栏、左侧栏和右侧栏div。

左栏和右栏都浮动在"Container“中。

但是，如果您查看下图，您可以看到右栏下面显示的是灰色背景。如果"Container“真的包含顶部、左侧和右侧条，则应通过容器背景显示，底部应为白色的均匀级别。

相反，看起来容器并没有完全包含左栏和右栏，因此实际的正文背景显示在右栏的底部。

​

​

这是我的CSS：

#container {
    margin: 0 auto;
    width: 750px;
    background-color: #ffffff; }

#top-panel {
    background-color: #000000;
    text-align: left;
    width: 100%;
    height: 88px;
    float: left; }

#left-panel {
     clear: left;
     text-align: center;
     background-color: #ffffff;
     border-right: 1px dashed #000000;
     float: left;
     width: 250; }

#right-panel {
    background-color: #ffffff;
    float: left;
    width: 499; }

我如何才能让“容器”真正包含其中的div，这样灰色的背景就不会出现在我的右侧面板下面，并在底部创建不均匀的色阶？

Answer 1

您的两个面板都是浮动的，因此会从页面的正常流程中移除。要使容器封装它们，您必须清除浮动。我这样做的方式是为br明确类：

.clear {
    clear:both;
    line-height:0;
}

这种方式不占用空间，而且是清晰的。然后将它放在容器div中的两个div下

<br class="clear" />

应该行得通！

Answer 2

overflow: auto 

应该能修好它。

Answer 3

overflow:hidden; height:100%; <-- for ie

就能做到这一点。