浮動箱子的背景顏色

Question

對this page有一個#container div有白色背景。這個白色背景不會出現在5個浮動框（標題爲「Latest」，Music Festivals，Alerts等）後面，儘管這些框是#container的子項，並且沒有指定自己的背景顏色，爲什麼？

Answer 1

父容器不會展開以適應浮動元素。您需要一種方法來清除浮動元素，以便在子元素之後結束浮動元素。看到這個頁面：

http://www.quirksmode.org/css/clearing.html

Answer 2

你應該最後一個浮動元素後面加一個<div style="clear:both"></div>，讓您的浮動元素上增加你#container塊的高度影響。否則它們會從容器盒中「掉出」。

Answer 3

你只需要clear your floats使用.box課後：

.box { 
    float: left; 
    width: 30%; 
    text-align: justify; 
    margin-right: 25px; 
} 

下面是可能最簡單的方法：添加`溢出

<div id="main"> 
    <div class="box"></div> 
    <div class="box"></div> 

    <br style="clear: both; display: block;" /> 
</div>