HTML浮动右元素顺序

Question

如果我有三个元素向右扩展,为什么顺序跟随(参见jsfiddle)元素1是右侧的第一个元素,当元素3实际上是最后一个元素时.

订单现在

[3] [2] [1]

但是元素在html中按此顺序排列

[1] [2] [3]

为什么？

http://jsfiddle.net/A9Ap7/

Answer 1

那个"倒序"是预期的结果.

如果您愿意,可以在CSS规范中进行挖掘,但是您的示例应该按照它应该进行渲染.

如果您希望它们以与标记相同的顺序显示,请.container向右浮动,其子项将离开.

更新了jsfiddle

Answer 2

第一个元素向右移动,当它到达容器边缘时停止,并允许下一个元素向上移动到左侧.

然后第二个元素执行相同的操作,除非它碰到第一个元素的左边缘时停止.

… 等等.

Answer 3

float属性从最右边到最左边开始它的分析。
前任：

<div class="block block-1"></div>
<div class="block block-2"></div>
<div class="block block-3"></div>

有了这个规则：

.block {
    float: left;
}

block-3向左对齐，我们有：block-3, block-1, block-2
block-2向左对齐，我们有：block-2, block-3, block-1
block-1向左对齐，我们有：block-1, block-2, block-3

有了这个规则：

.block {
    float: right;
}

block-3向右对齐，我们有：block-1, block-2, block-3
block-2向右对齐，我们有：block-1, block-3, block-2
block-1向右对齐，我们有：block-3, block-2, block-1

如果您希望它们float:right按正确的顺序排列：block-1, block-2, block-3
那么您应该在标记中交换它们

<div class="block block-3"></div>
<div class="block block-2"></div>
<div class="block block-1"></div>

更新：或者将它们全部包装在一个父级中，并且只浮动父级