HTML浮动右元素顺序答案

【问题标题】：HTML float right element orderHTML浮动右元素顺序
【发布时间】：2011-11-27 17:01:38
【问题描述】：

如果我将三个元素浮动到右侧，为什么要遵循（参见 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！）中的第一个元素是靠近边缘的远端。

【讨论】：