Se ho tre elementi a destra, perché l'ordine segue (vedi jsfiddle) l'elemento 1 è il primo elemento sul lato destro, quando l'elemento 3 è in realtà l'ultimo elemento.HTML float right element
ordine è ora
[3] [2] [1]
Ma gli elementi sono in questo ordine in html
[1] [2] [3]
Perché?
That 'ordine inverso' è il risultato desiderato.
Se vuoi, puoi scavare nello CSS Specification, ma il tuo esempio esegue il rendering come dovrebbe.
Se desideri che vengano visualizzati nello stesso ordine del markup, imposta il valore .container a destra, i suoi figli rimasti.
Il primo elemento si sposta verso destra, si ferma quando colpisce il bordo del contenitore e consente all'elemento successivo per spostarsi fino alla sua sinistra.
Il secondo elemento quindi fa lo stesso, tranne che si ferma quando colpisce il bordo sinistro del primo elemento.
... e così via.
L'utilizzo di float o di qualsiasi altra proprietà css non ha alcun effetto sul codice sorgente HTML.
Qualsiasi elemento che segue l'elemento flottante scorrerà attorno all'elemento flottante sull'altro lato.
Se si sposta un'immagine a sinistra, qualsiasi testo o altri elementi che seguono lo scorreranno attorno a destra. E se si sposta un'immagine a destra, qualsiasi testo o altri elementi che seguono lo scorreranno attorno a sinistra.
Se entrambi gli elementi sono impostati per flottare nella stessa direzione (in questo caso, a destra), il primo che appare nel nostro HTML (non in CSS!) Sarà quello sul lato più lontano vicino al bordo.
float proprietà avvia l'analisi da destra a sinistra più.
es:
<div class="block block-1"></div>
<div class="block block-2"></div>
<div class="block block-3"></div>
con questa regola:
.block {
float: left;
}
block-3 ottiene allineati a sinistra, abbiamo: block-3, block-1, block-2
block-2 ottiene allineati a sinistra, abbiamo: block-2, block-3, block-1
block-1 ottiene allineato a sinistra, abbiamo: block-1, block-2, block-3
con questa regola:
.block {
float: right;
}
block-3 ottiene allineato a destra, abbiamo: block-1, block-2, block-3
block-2 ottiene allineato a destra, abbiamo: block-1, block-3, block-2
block-1 ottiene allineato a destra, abbiamo: block-3, block-2, block-1
Se li volete float:right nel giusto ordine: block-1, block-2, block-3
allora li si dovrebbe scambiare nel markup
<div class="block block-3"></div>
<div class="block block-2"></div>
<div class="block block-1"></div>
UPDATE: O tutti avvolgerli in un genitore, e solo galleggiare genitore
Questo perché nel tuo html, è stato specificato che [elemento 1] essere visualizzato prima allineato a destra. Quindi questo è esattamente ciò che rende il browser. Quando, nel tuo html, vai avanti per visualizzare [elemento 2], flottato a destra, il browser lo fa MA DOPO aver dato priorità a [elemento 1] di essere visualizzato a destra mentre [elemento 1] veniva prima nel tuo HTML.
Spero che questo abbia senso.
Probabilmente hai risolto qualche problema per OP, ma in realtà non hai detto cosa dà la priorità a un elemento flottante. –
Priorità: primo arrivato, primo servizio. – Ralf