HTML float右元素順序

Question

如果我有三個元素標記爲右側，爲什麼順序跟隨（請參閱jsfiddle）元素1是右側第一個元素，當元素3實際上是最後一個元素時。現在

秩序是

[3] [2] [1] 

但元素，按順序HTML

[1] [2] [3] 

爲什麼？

http://jsfiddle.net/A9Ap7/

Answer 1

即 '倒順序' 是預期的結果。

如果您願意，可以在CSS Specification中挖掘，但您的示例應該如其呈現。

如果您希望它們以與標記相同的順序顯示，請將其右側的.container浮動，其子項離開。

Updated jsfiddle

Answer 2

第一元件移動到右側，停止時它擊中所述容器的邊緣並允許下一個元件移動到它的左。

第二個元素然後執行相同的操作，除非它碰到第一個元素的左邊時停止。

...等等。

Answer 3

使用float或任何其他css屬性對html源代碼沒有影響。

任何跟在浮動元素後面的元素都將在另一側的浮動元素周圍流動。

如果將圖像浮動到左側，則任何文本或其後的元素都將圍繞它向右流動。如果你將圖像浮動到右側，任何文本或其後的任何元素都將圍繞它左移。

Answer 4

如果兩個元素都設置爲浮動方向相同（在本例中爲右），那麼出現在我們的HTML（不是CSS！）中的第一個元素就是靠近邊的遠側。

Answer 5

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：或包裹他們都在父母，只有浮動父

Answer 6

這是因爲在你的HTML，你已經指定了[元素1]顯示第一靠右對齊。因此，這正是瀏覽器呈現的內容。在你的html中，當你繼續顯示[元素2]，浮動到右側時，瀏覽器執行此操作，但是在[元素1]優先顯示在右側，因爲[元素1]在HTML中首先出現。

希望這是有道理的。