漂浮的div失去了父母的课堂：两个;？

Question

我在尝试在两行周围放置边框时遇到了一些麻烦。它目前只排在第一行。

我用过清楚：两者;对于一个新的div行，但它似乎带走了带边框的父div样式。

<style type="text/css">
.box {
    border: 1px solid #E5E5E5;
    border-radius: 4px 4px 4px 4px;
    width: 90%;
}
</style>

<div class="box">
    <div style="float:left; width:150px;">
        Row 1, Column 1
    </div>
    <div style="float:left; width:150px;">
        Row 1, Column 2
    </div>

    <div style="clear:both;"></div>

    <div style="float:left; width:150px;">
        Row 2, Column 1
    </div>
    <div style="float:left; width:150px;">
        Row 2, Column 2
    </div>
</div>

由于

Answer 1

如果您想保持相同的HTML结构，只需在最后一个div之后添加一个clear:both容器。 http://jsfiddle.net/7cptj/

Answer 2

尝试在第二行后添加清除div。这应该可以解决您的问题。

原因在于，当您浮动元素时，您或多或少会将其从其父元素中分离出来。 clear: both将一个空白元素放置在浮动div的相对下方，从而保留浮动div通常占用的“空间”。