css - 与 float 行为混淆

标签 css

<!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.用浏览器打开上面的html，它看起来像这样 enter image description here

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

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

根据规范:

If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.

D 的顶部必须低于前面盒子(A，B，C)的底部但是现在 D 的顶部比 B 高。为什么？

最佳答案

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