html - 前一个 float 框如何影响下一个 float 框？

Question

两段css，里面有3个框，css和css2只有一个区别。
在 css1 中它是 float:left; 用于 box2，在 css2 中它是 float:right; 用于 box2。
css1 和 css2 的任何其他 css 代码都是相同的。
这是我的 css1。

body{
    margin:0px;
    }
div.box{
    width:640px;
    height:800px;
    }
div.box1{
    width:500px;
    height:100px;
    background-color: red;
    float:left;
    }
div.box2{
    width:140px;
    height:140px;
    background-color: blue;
    float:left;
    } 
div.box3{
    width:250px;
    height:300px;
    background-color: green;
    float:left;
    }

 <div class="box">
    <div class="box1">box1
    </div>
    <div class="box2">box2
    </div>
    <div class="box3">box3
    </div>
</div>

这是我的 css2。

body{
    margin:0px;
    }
div.box{
    width:640px;
    height:800px;
    }
div.box1{
    width:500px;
    height:100px;
    background-color:red;
    float:left;
    }
div.box2{
    width:140px;
    height:140px;
    background-color: blue;
    float:right;
    } 
div.box3{
    width:250px;
    height:300px;
    background-color: green;
    float:left;
    }

 <div class="box">
    <div class="box1">box1
    </div>
    <div class="box2">box2
    </div>
    <div class="box3">box3
    </div>
 </div>

css1和css2只有一行css不同。
在 css1 中，为什么 css1 中 box2 的 float:left 会导致 box1 和 bo3 之间出现间隙？
在 css2 中，为什么 css1 中的 box2 的 float:right 导致 box1 和 bo3 之间没有间隙？
请指出css规则
https://www.w3.org/TR/CSS22/visuren.html#float-rules
对于 css1 和 css2 的结果。

Answer 1

第一个 CSS 中 box2 的高度恰好有空间，因为 box2 和 box3 都是 floated 离开。因此，请考虑它们位于同一 z 轴上(仅作为示例)。

现在在第二种情况下，box1 和 box3 只是floated left。所以它们在同一平面上，而向右浮动的 box2 在另一个平面上。

我怀疑，float: left 也会clear: left。

注意:这可能不是确切的场景，但我使用了平面和z轴只是为了理解 strong> 以更简单的方式。