爲什麼我的「容器」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 

在容器上就可以了。