为什么后来的兄弟姐妹元素仍然漂浮在以前的兄弟姐妹身下？

Question

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

示例[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>。

请参阅JSFiddle上的working example。

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