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

Question

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

我有一个“Container”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; } 

链接here页面。

如何让“容器”真正包含里面的div，这样灰色的背景就不会显示在我的右侧面板下方，并在底部创建不均匀的水平？

Answer 1

您的两个面板都是浮动的，因此会从正常的页面流中取出。为了使容器封装它们，你必须清除浮子。我做的方法是为类别清除br：

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

这样它就占用了空间并且很清晰。然后把它放在容器div的两个div下面

<br class="clear" /> 

应该工作！

Answer 2

什么都不是强迫遏制，你可以指定一个明确的最后一个元素来强制镇压。一个常见的手段是与clear:both即增加一个额外的阻挡元件：<div style="clear:both"></div>

Answer 3

overflow: auto 

应该修复它。

Answer 4

有一个css唯一的方法来处理称为clearfix的问题。这是最好的使用它，你有选择地应用到你想要的div类：

.clearfix { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 

针对您的特殊标记，以下CSS将做：

#left-panel:after, 
#right-panel:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 

参考http://www.positioniseverything.net/easyclearing.html

Answer 5

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

在容器上就可以了。