上一個浮動框如何影響下一個浮動框？

兩段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的解釋。 –

上一個浮動框如何影響下一個浮動框？

回答

相關問題