Ordre des éléments droits float HTML

Question

Si j’ai trois éléments flaoted à droite, pourquoi l’ordre suit (voir jsfiddle) élément 1 est le premier élément sur le côté droit, quand l’élément 3 est en fait dernier élément.

L’ordre est maintenant

Mais les éléments sont dans cet ordre en html

pourquoi?

http://jsfiddle.net/A9Ap7/

Answer 1

Ce « ordre inversé » est le résultat escompté.

Vous pouvez fouiller dans la spécification CSS si vous le souhaitez, mais votre exemple s’affiche comme il se doit.

Si vous souhaitez qu’ils s’affichent dans le même ordre que le balisage, faites flotter la `` droite, ses enfants à gauche.

Jsfiddle mis à jour

Answer 2

Le premier élément se déplace vers la droite, s’arrête lorsqu’il atteint le bord du conteneur et permet à l’élément suivant de se déplacer vers sa gauche.

Le deuxième élément fait alors la même chose, sauf qu’il s’arrête lorsqu’il atteint le bord gauche du premier élément.

... et ainsi de suite.

Answer 3

L’utilisation de float ou de toute autre propriété css n’a aucun effet sur le code source html.

Tout élément qui suit l’élément flottant circulera autour de l’élément flottant de l’autre côté.

Si vous faites flotter une image vers la gauche, tout texte ou autre élément qui la suit circulera autour d’elle vers la droite. Et si vous faites flotter une image vers la droite, tout texte ou autre élément qui la suit circulera autour d’elle vers la gauche.

Answer 4

En effet, dans votre html, vous avez spécifié que [élément 1] soit affiché en premier aligné à droite. Par conséquent, c’est exactement ce que le navigateur rend. Lorsque, dans votre html, vous continuez à afficher [élément 2], flottant vers la droite, le navigateur le fait MAIS APRÈS avoir donné [élément 1] la priorité d’être affiché à droite comme [élément 1] est venu en premier dans votre CODE HTML.

J’espère que cela a du sens.