HTML浮动右侧元素顺序

Question

如果我有三个元素向右浮动，为什么顺序如下（参见 jsfiddle）：第一个元素是右侧的第一个元素，而第三个元素实际上是最后一个元素。

现在的顺序是:

[3] [2] [1]

但在 HTML 中，元素的顺序是这样的

[1] [2] [3]

为什么？

http://jsfiddle.net/A9Ap7/

- newbie

Answer 1

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

如果你愿意，可以在CSS规范中查找相关信息，但是您的示例呈现出了应该呈现的效果。

如果您希望它们按照标记的顺序显示，请将. container向右浮动，其子元素向左浮动。

更新后的jsfiddle

- bookcasey

---

你可能已经为提问者解决了一些问题，但实际上并没有说明是什么使得浮动元素具有优先权。 - Gui Imamura

优先级：先到先服务。 - Ralf

Answer 2

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

然后第二个元素也是一样，不过它会在碰到第一个元素的左边缘时停止。

... 以此类推。

- Quentin

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>

更新： 或者将它们全部包含在一个父元素中，只对父元素进行浮动。

- iamandrewluca

Answer 4

使用float或者其他css属性对html源代码没有影响。

任何跟在浮动元素后面的元素都会流动到浮动元素的另一侧。

如果你将一个图片向左浮动，那么任何跟在它后面的文本或其他元素都会向右流动。如果你将一个图片向右浮动，任何跟在它后面的文本或其他元素都会向左流动。

- Faraz Kelhini

Answer 5

这是因为在你的HTML中，你指定了[element 1]首先向右对齐显示。这正是浏览器所呈现的。当你在HTML中继续显示[element 2]时，它会向右浮动，但是浏览器在给[element 2]向右浮动之前，会优先给[element 1]向右对齐显示，因为[element 1]在HTML中排在前面。

希望这样说得清楚明白。

- IqbalHamid

Answer 6

如果两个元素都设置为相同方向的浮动（在这种情况下是右侧），则在我们的HTML中出现的第一个元素（而不是CSS！）将成为靠近边缘的远侧元素。

- Andre Katov