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

Question

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

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。

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

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

Why are subsequent sibling elements still stuck floating beneath a previous sibling?

css

css-float