css - 为什么后续的同级元素仍然卡在前一个同级元素的下方？

Question

我想将红色元素一直 float 到右上角。然而，它的顶部位置仍然在它之前的元素之下。为什么 float 会这样？以及如何让红色元素 float 到右上角？

示例 [jsfiddle.net]

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;
}

Answer 1

你可以简单地把<div class="red"></div>作为第一个<div> .

参见 working example在 JSFiddle 上。

这是因为 float CSS 中的 ed 元素与前一个元素的底部对齐(如果没有前一个元素，则与容器元素的底部对齐)。