HTMLは、右の要素の順序

Question

をフロート、なぜ順序は、要素3は、実際に最後の要素であるとき、素子1は、右側の最初の要素である（jsfiddleを参照）、以下れます。

注文は今

[3] [2] [1] 

である。しかし要素は、HTML

[1] [2] [3] 

なぜにこの順になっていますか？

http://jsfiddle.net/A9Ap7/

Answer 1

それ '逆の順序は' 意図した結果です。

あなたが欲しい場合は、CSS Specificationに周りを掘ることができますが、あなたの例では、それがあるべきとしてレンダリングされます。

あなたが.container右フロート、それらをマークアップと同じ順序で表示したい場合は、その子は左。

Updated jsfiddle

Answer 2

最初の要素は右に移動し、それが容器の縁に衝突し、次の要素が左まで移動することができたときに、停止します。それは最初の要素の左縁に当たったときに止まる以外

第2の要素は、次に、同じことを行います。

...など。フロートまたは任意の他のCSSプロパティを使用

Answer 3

は、HTMLソースコードに影響を及ぼしません。

浮上要素が他方の側に浮遊要素の周囲に流れることになる次の任意の要素。

イメージを左に浮動させると、それに続くテキストやその他の要素が右に流れます。また、画像を右に浮かせば、それに続くテキストやその他の要素が左に流れます。

Answer 4

両方の要素が同じ方向（この場合は右）に浮動するように設定されている場合、最初の部分はCSSの部分ではなく、HTMLの端に近い辺の部分です。

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]を表示すると、HTMLに[要素1]が最初に来たときに[要素1]が右に表示された後、ブラウザはこれを行います。

希望はこれが理にかなっています。