爲什麼後續的兄弟元素仍然停留在前一個兄弟之下？

我想將紅色元素一直浮到右上角。但是，它的頂級位置仍然在它之前的元素之下。爲什麼浮動表現這種方式？我怎樣才能讓紅色元素漂浮在右上角？爲什麼後續的兄弟元素仍然停留在前一個兄弟之下？

HTML：

<div class='blue'></div> 
<div class='red'></div> 
<div class='black'></div>

CSS：

div { 
    width: 100px; 
    height: 100px; 
    margin:2px; 
} 

.blue { background-color:blue; } 
.red { background-color:red; } 
.black { background-color:black; } 

.red { 
    float:right; 
}

來源

2015-11-16 cblupo

你可以簡單地把<div class="red"></div>作爲第一<div>。

請參閱JSFiddle上的working example。

這是因爲float CSS中的元素與上一個元素的底部對齊（或者如果沒有以前的元素，則與容器元素的底部對齊）。「

來源

2015-11-16 00:58:57

」CSS中的浮動元素與下一個元素的頂部對齊「。謝謝，從未聽過。你是怎麼找到這個的？是否有說明某處的說明？ – cblupo

@cblupo不，只是由我自己的經驗=）。但是你有沒有發現與此相矛盾的事情？ –

「或容器元素，如果沒有後續元素。」當我刪除最後一個元素（來自我的jsfiddle）時，儘管我刪除了後面的元素，但紅色塊保留在相同的位置。爲什麼？ – cblupo

爲什麼後續的兄弟元素仍然停留在前一個兄弟之下？

回答

相關問題