爲什麼浮動右元素不能一直到頂部？

Question

我知道，發生這種情況，而是想說明爲什麼，因爲我想更好地瞭解浮技工

鑑於這種HTML

<div class="wrapper"> 
    <div class="inner first">1</div> 
    <div class="inner second">2</div> 
    <div class="inner third">3</div> 
</div> 

和這個CSS

.wrapper { 
    width: 500px; 
    height: 500px; 
    margin: 100px auto; 
    border: 1px solid black; 
} 

.inner { 
    border: 1px solid black; 
    box-sizing: border-box; 
} 

.first, .second { 
    float: left; 
    width: 300px; 
    height: 300px; 
} 

.third { 
    width: 200px; 
    height: 200px; 
    float: right; 
} 

第三股利不浮動一路右上方，但與第二個div

對齊

我知道，發生這種情況，但我想更具體的解釋，爲什麼（根據什麼規則）

Answer 1

好問題，我已經看到了難以理解這部分人。根據你的問題，我覺得你想在框中將'3'對齊右上角。你的內心是500 * 500，你的第一個和第二個是300 * 300，因爲它不能適應總共600個，第二個將低於第一個。然後第三個是200的空間。它將需要接下來的200個空間（第二個空間旁邊），上面的空間不被利用。爲了獲得所需的輸出，你想要的是如圖所示的3向上移動，以便首先利用右上角200的空間。

可能這可以幫助你：

<div class="wrapper"> 
    <div class="inner third alg">3</div> 
    <div class="inner first">1</div> 
    <div class="inner second ">2</div> 
    </div> 

CSS代碼：

.wrapper { 
    width: 500px; 
    height: 500px; 
    margin: 100px auto; 
    border: 1px solid black; 
} 

.inner { 
    border: 1px solid black; 
    box-sizing: border-box; 
} 

.first, .second { 
    float: left; 
    width: 300px; 
    height: 300px; 
} 

.alg{ 
    text-align: right; 
} 

.third { 
    width: 200px; 
    height: 200px; 
    float: right; 
} 

我希望這件事現在越來越清晰的給你。如果下面沒有評論，我可以用更多的例子來解釋。

Answer 2

這是因爲float rules說

浮動框可能不會比由元件產生的前面任何block或floated箱的外頂更高的outer top源文件。

由於沒有在.first右足夠的空間，.second是位於下側。但是，.third不能放在.second之上，即使它適合於.first剩下的可用空間。

Answer 3

這是因爲頁面流順序。當你浮動一個元素時，你並不是完全從頁面的流順序中移除它，而是指定它應該將自己定位到元素的左邊或右邊。通過向右移動div三，就像完全放置div一樣，您不會完全將其從流中移除。

在你的例子中，div one和two的寬度比父包裝寬。這意味着它們不能內聯，因此它們堆疊在一起。在前面的元素右邊劃分三個位置（div div），但仍受流動順序的影響，並位於div div下方。