上一个浮动框如何影响下一个浮动框？

两段CSS，其中3个框，只有一个区别css和css2。
在css1中，box2为float:left;，在css2中为box2中的float:right;。
对于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>

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

来源

2016-04-26 it_is_a_literature

你刚才更新的问题，我的答案是否清楚？ '：）' –

我正在寻找z轴来帮助我理解它。 –

哈哈..这是一个虚构的Z轴...只是为了您的理解。我给了它两次。大声笑。 –

有空间正好到box2的第一CSS的高度，因为，无论是box2和box3是float版left。所以考虑他们在同一个z轴（例如）。

现在在第二种情况下，box1和box3仅为float ed left。所以他们在同一架飞机上，而右边的box2在另一架飞机上。我想，float: left也将clear: left。

注：这可能不是确切的情况，但我用planes和z-axis只是以简单的方式了解。

来源

2016-04-26 09:47:51

我无法找到z轴和飞机之间的关系以及我的问题。我很抱歉地说，在Praveen Kumar的解释中有类比和隐喻，它让我感到困惑，我希望其他专家用更多逻辑解释它并且推理。 –

@it_is_a_literature我同意。 :)让专家回答。但是你是否理解了我认为可能有效的逻辑？ –

最后我理解了Praveen Kumar的解释。 –

上一个浮动框如何影响下一个浮动框？

回答

相关问题