Question

<!DOCTYPE html>
<html>
<head>
    <title>float</title>
    <style>
    .container {
        margin:0 auto;
        width:310px;
        height:500px;
        border:1px solid blue
    }

    .f {
        float:left;border: 1px solid red;width:100px;
    }
    </style>
</head>
<body>
    <div class="container">
    <div class="f" style="height:100px">
        A
    </div>
    <div class="f" style="height:150px">
        B
    </div>
    <div class="f" style="height:200px">
        C
    </div>
    <div class="f" style="height:50px">
        D
    </div>
    </div>
</body>
</html>

1.用broswer打开上面的html，它看起来像这样 enter image description here

2.将C的高度降低到120px

现在它看起来像这样 enter image description here

根据规范：

如果当前框是左浮动的，并且源文档中较早的元素生成了任何左浮动框，则对于每个此类较早的框，要么当前框的左外边缘必须在右侧早期框的右外边缘，或其顶部必须低于前一个框的底部。类似的规则适用于右浮箱。

D的顶部必须低于前面框的底部（A，B，C）但现在D的顶部高于B.为什么？

Answer 1

它说两者中的任何一个都是真的。

当前框的左外边缘必须在右边前面框的右外边缘，

OR

或其顶部必须低于前一个框的底部。

对于D条件1相对于B为真，而条件2对于C

为真

Answer 2

如果您需要将所有框放在一行中，请

更改conatiner width以容纳box D

 .container {
        margin:0 auto;
        width:410px;
        height:500px;
        border:1px solid blue
    }

    .f {
        float:left;border: 1px solid red;width:100px;
    }

DEMO

与浮动行为混淆

2 个答案: