浮动框的背景颜色

Question

在this page上有一个#container div，背景为白色。这个白色背景不会出现在5个浮动框的背后（标题为“最新”，音乐节，警报等），即使这些框是#container的子项，也没有指定自己的背景颜色，为什么？

Answer 1

父容器不会展开以适合浮动元素。您需要一种方法来“清除”浮动以结束子元素之后的浮动。见本页：

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

Answer 2

你应该在最后一个浮动元素之后添加<div style="clear:both"></div>，这样你的浮动元素会影响你的#container块的高度。否则他们会从你的容器盒里掉出来。

Answer 3

使用.box课程后，您只需clear your floats：

.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>