HTML浮动右元素顺序

如果我有三个元素右alignment，为什么顺序如下（见jsfiddle）元素1是第一个元素在右侧，当元素3实际上是最后一个元素。

订单现在

[3] [2] [1] 

但元素是在这个顺序在HTML

 [1] [2] [3] 

为什么？

http://jsfiddle.net/A9Ap7/

Answer 1

这个“倒序”是预期的结果。

如果你愿意的话，你可以在CSS规范中进行挖掘，但是你的例子应该像它应该那样渲染。

如果您希望它们按照与标记相同的顺序显示，请将.container浮动右侧，其子项离开。

更新了jsfiddle

Answer 2

第一个元素向右移动，当它碰到容器边缘时停止，并允许下一个元素向左移动。

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

… 等等。

Answer 3

使用浮动或任何其他CSS属性对html源代码没有影响。

在浮动元素之后的任何元素将在另一侧的浮动元素周围stream动。

如果将图像浮动到左侧，则其后的任何文本或其他元素将向右stream动。 如果将图像向右浮动，则任何文字或其后的元素都将stream向左侧。

Answer 4

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

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

有了这个规则：

 .block { float: left; } 

block-3被alignment到左边，我们有： block-3, block-1, block-2
block-2被alignment到左边，我们有： block-2, block-3, block-1
block-1alignment到左边，我们有： block-1, block-2, block-3

有了这个规则：

 .block { float: right; } 

block-3被alignment到右边，我们有： block-1, block-2, block-3
block-2被alignment到右边，我们有： block-1, block-3, block-2
block-1alignment到右边，我们有： 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> 

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

Answer 5

如果两个元素都设置为相同的方向（在本例中为右），那么出现在我们的HTML（不是CSS！）中的第一个元素是靠近边的远侧的元素。

Answer 6

这是因为在你的html中，你已经指定[元素1]首先显示在右边。 因此，这正是浏览器呈现的内容。 当你在html中继续显示[元素2]时，浏览器会执行此操作，但在给出[元素1]优先级显示在右边的时候，[元素1]在HTML中首先出现。

希望这是有道理的。