Question

参见http://jsfiddle.net/w1xhpp2c/的示例。我不明白为什么div.b被包裹在float元素周围。我一直认为只有内联元素可以包装浮点元素，而块元素则不会。

.wrap{
        width: 500px;
    }
    .a{
        float: left;
        width: 200px;

    }
    .b{
        background-color:#eee;
        width:500px;
    }

<div class="wrap">

        <div class="a">
            a<br/>
            a<br/>
        </div>

        <div class="b">
             b<br/>
             b<br/>
             b<br/>
        </div>
</div>

Answer 1

块框在浮动元素下流动。 CSS 2.1 spec says

由于浮动不在流中，因此创建了未定位的块框在浮动箱垂直流动之前和之后，好像浮子没有存在

Answer 2

如果您不希望发生这种情况，您需要清除浮动：

.wrap{
        width: 500px;
        overflow: none;
    }
    .a{
        float: left;
        width: 200px;

    }
    .b{
        background-color:#eee;
        width:500px;
        clear: left;
    }

Answer 3

不知道这会不会更好，特别是对摆放的控制变得更好。 http://jsfiddle.net/w1xhpp2c/1/

    .wrap{
        width: 500px;
        float:left;
    }
    .a{
        float: left;
        width: 200px;

    }
    .b{
        float:right;
        background-color:#eee;
        width:300px;
    }

简而言之，让包装器也浮动并在里面让左边的元素向左浮动，向右浮动。

CSS：为什么阻止元素包围浮动元素

3 个答案: