HTML浮动右元素顺序

Question 1

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

现在订购

[3] [2] [1]

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

[1] [2] [3]

为什么？

Question 2

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

您可以根据需要在CSS规范中进行深入研究，但是示例将按原样进行渲染。

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

Question 3

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

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

… 等等。

Question 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向左对齐，我们有：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>

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

Question 5

使用float或任何其他CSS属性对html源代码无效。

跟随浮动元素的任何元素都会在另一侧围绕浮动元素流动。

如果将图像浮动到左侧，则其后的所有文本或其他元素将在其周围向右流动。而且，如果将图像浮动到右侧，则紧随其后的所有文本或其他元素将在其周围向左侧流动。

Question 6

这是因为在html中，您已指定[element 1]首先显示在右侧。因此，这正是浏览器呈现的内容。当在html中继续显示[element 2]并向右浮动时，浏览器会执行此操作，但是[HTML]首先出现[element 1]优先显示在右边，因为[element 1]出现在HTML中。

希望这是有道理的。

Question 7

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