HTML 向右浮动元素顺序答案

【问题标题】：HTML float right element orderHTML 向右浮动元素顺序
【发布时间】：2022-11-20 01:59:33
【问题描述】：

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

现在下单

[3] [2] [1]

但是元素在html中是按这个顺序的

[1] [2] [3]

为什么？

http://jsfiddle.net/A9Ap7/

【问题讨论】：

标签： html css

【解决方案1】：

“倒序”是预期的结果。

如果您愿意，您可以在CSS Specification 中四处挖掘，但您的示例会按应有的方式呈现。

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

Updated jsfiddle

【讨论】：

您可能为 OP 解决了一些问题，但实际上并没有说明是什么赋予了浮动元素优先权。
优先权：先到先得。

【解决方案2】：

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

然后第二个元素做同样的事情，除了它在碰到第一个元素的左边缘时停止。

… 等等。

【讨论】：

【解决方案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>

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

【讨论】：

【解决方案4】：

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

浮动元素后面的任何元素都将围绕另一侧的浮动元素流动。

如果您将图像向左浮动，则它后面的任何文本或其他元素都会向右环绕它。如果您将图像向右浮动，则其后的任何文本或其他元素都会向左环绕它。

【讨论】：

【解决方案5】：

这是因为在您的 html 中，您已指定 [element 1] 首先显示在右侧。因此，这正是浏览器呈现的内容。当在您的 html 中，您继续显示 [element 2]，向右浮动时，浏览器执行此操作，但在给予 [element 1] 显示在右侧的优先级之后，因为 [element 1] 在您的 HTML 中排在第一位。

希望这是有道理的。

【讨论】：

【解决方案6】：

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

【讨论】：