前のフローティングボックスは、次のフローティングボックスにどのように影響しますか？

Question

cssの2つのセクション、3つのボックス、cssとcss2の違いは1つだけです。
css1ではbox2の場合はfloat:left;、css2の場合はbox2の場合はfloat:right;です。
他のcssコードは、css1とcss2で同じです。
ここは私の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です。 CSSの

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の間で異なっています。
なぜcss1のbox2の float:leftは、box1とbo3の間にギャップがありますか？
css1でbox2の float:rightがbox1とbo3の間にギャップがないのはなぜですか？
css1とcss2の結果については、CSS規則
https://www.w3.org/TR/CSS22/visuren.html#float-rules
を指摘してください。

Answer 1

box2とbox3両方がfloat編leftている、ので、スペースは正確に最初のCSSでbox2の高さにあります。だから、それらが同じz軸にあると考えてみてください。

ここで、box1とbox3は、float ed leftです。だから彼らは同じ飛行機にいるのですが、box2は右に浮かんでいて、別の飛行機にあります。

と思われますが、float: leftもclear: leftとなります。

注：これは、正確なシナリオではないかもしれないが、私はちょうど簡単な方法でを理解するためのplanesとz-axisを使用しました。