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

Question

我正在为我的学校"数学接力"比赛创建一个网站.

我有一个"容器"div(带有白色背景),然后是容器内的顶栏,左栏和右栏div.

左栏和右栏都漂浮在"集装箱"内.

但是,如果您查看下面的图像,您可以看到右侧栏的下方显示灰色背景.如果"容器"确实包含顶部,左侧和右侧条,那么它应该是显示通过的容器背景,并且底部应该都是具有白色的统一级别.

相反,似乎容器没有完全包含左右栏,因此实际的身体背景显示在右侧栏的底部.

这是我的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:hidden; height:100%; <-- for ie

在容器上会做到这一点.

Answer 3

overflow: auto 

应该解决它.