浮动箱子的背景颜色

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>