如果我有三个元素向右扩展，为什么顺序跟随（参见jsfiddle）元素1是右侧的第一个元素，当元素3实际上是最后一个元素时。
现在订单
[3] [2] [1]
但是元素在html
中按此顺序排列[1] [2] [3]
为什么？
答案 0 :(得分：88)
'倒置顺序'是预期的结果。
如果您愿意，可以在CSS Specification中进行挖掘，但您的示例会按照应有的方式呈现。
如果您希望它们以与标记相同的顺序显示，请将.container向右浮动，让其子项离开。
答案 1 :(得分：15)
第一个元素向右移动，当它到达容器边缘时停止，并允许下一个元素向上移动。
然后第二个元素做同样的事情，除非它碰到第一个元素的左边缘时停止。
......等等。
答案 2 :(得分：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>
UPDATE：或者将它们全部包装在父级中，并且只浮动父级
答案 3 :(得分：3)
使用float或任何其他css属性对html源代码没有影响。
浮动元素后面的任何元素都会在另一边的浮动元素周围流动。
如果向左浮动图像，则其后面的任何文本或其他元素都会向右流动。如果将图像浮动到右侧，则跟随它的任何文本或其他元素都会围绕它向左流动。
答案 4 :(得分：0)
如果两个元素设置为浮动相同的方向（在本例中为右侧），则出现在我们的HTML（不是CSS！）中的第一个元素是靠近边缘的远侧的元素。
答案 5 :(得分：0)
这是因为在您的html中，您已指定首先将[元素1]显示在右侧。因此，这正是浏览器呈现的内容。当您在html中继续显示[元素2]，向右浮动时，浏览器会执行此操作，但在[元素1]优先显示在右侧后，[元素1]首先出现在HTML中。< / p>
希望这是有道理的。