53
Vue d’ensemble du modèle de formatage visuel
boîte.conteneur.ou.d’une.autre.boîte.flottante..Les.boîtes.flottantes.ne.s’insèrent.pas.dans.le.
flux.normal.du.document,.si.bien.que.les.boîtes.de.bloc.qui.sont.dans.le.flot.se.comportent.
comme.si.les.boîtes.flottantes.n’existaient.pas.
Comme.le.montre.la.Figure 3.13,.la.boîte 1,.qui.flotte.à.droite,.sort.du.flux.du.document.et.se.
décale.à.droite.jusqu’à.ce.que.son.bord.droit.touche.le.bord.droit.du.bloc.conteneur..
boîte 1
boîte 2
boîte 3
boîte 2
boîte 1
boîte 3
Aucune boîte flottante
La boîte 1 flotte à droite
Figure 3.13
Exemple d’élément flottant à droite.
À. la. Figure 3.14,. la. boîte 1,. qui. flotte. à. gauche,. sort. du. flot. du. document. et. se. décale. à.
gauche.jusqu’à.ce.que.son.bord.gauche.touche.le.bord.gauche.du.bloc.conteneur..Comme.
elle. n’est. plus. dans. le. flot,. elle. ne. prend. aucun. espace. et. s’affiche. par-dessus. la. boîte 2.
qu’elle.masque.complètement..Si.vous.faites.flotter.les.trois.boîtes.à.gauche,.la.boîte 1.est.
décalée.à.gauche.jusqu’à.toucher.sa.boîte.conteneur,.et.les.deux.autres.boîtes.sont.décalées.
à.gauche.jusqu’à.toucher.la.boîte.flottante.précédente..
boîte 1
boîte 3
boîte 1 boîte 2
boîte 3
Les trois boîtes flottent à gauche
La boîte 1 flotte à gauche
La boîte 2 est
masquée sous
la boîte 1.
Figure 3.14
Exemple d’éléments flottant à gauche.
Si.le.bloc.conteneur.est.trop.étroit.pour.que.tous.les.éléments.flottants.tiennent.à.l’horizontale,.le.reste.des.éléments.flottants.est.renvoyé.plus.bas,.jusqu’à.ce.qu’il.y.ait.assez.de.place.
(voir.Figure 3.15)..Si.les.éléments.flottants.possèdent.des.hauteurs.différentes,.des.éléments.
flottants.viennent.buter.sur.d’autres.éléments.flottants.en.se.décalant.vers.le.bas..
Vue d’ensemble du modèle de formatage visuel
boîte.conteneur.ou.d’une.autre.boîte.flottante..Les.boîtes.flottantes.ne.s’insèrent.pas.dans.le.
flux.normal.du.document,.si.bien.que.les.boîtes.de.bloc.qui.sont.dans.le.flot.se.comportent.
comme.si.les.boîtes.flottantes.n’existaient.pas.
Comme.le.montre.la.Figure 3.13,.la.boîte 1,.qui.flotte.à.droite,.sort.du.flux.du.document.et.se.
décale.à.droite.jusqu’à.ce.que.son.bord.droit.touche.le.bord.droit.du.bloc.conteneur..
boîte 1
boîte 2
boîte 3
boîte 2
boîte 1
boîte 3
Aucune boîte flottante
La boîte 1 flotte à droite
Figure 3.13
Exemple d’élément flottant à droite.
À. la. Figure 3.14,. la. boîte 1,. qui. flotte. à. gauche,. sort. du. flot. du. document. et. se. décale. à.
gauche.jusqu’à.ce.que.son.bord.gauche.touche.le.bord.gauche.du.bloc.conteneur..Comme.
elle. n’est. plus. dans. le. flot,. elle. ne. prend. aucun. espace. et. s’affiche. par-dessus. la. boîte 2.
qu’elle.masque.complètement..Si.vous.faites.flotter.les.trois.boîtes.à.gauche,.la.boîte 1.est.
décalée.à.gauche.jusqu’à.toucher.sa.boîte.conteneur,.et.les.deux.autres.boîtes.sont.décalées.
à.gauche.jusqu’à.toucher.la.boîte.flottante.précédente..
boîte 1
boîte 3
boîte 1 boîte 2
boîte 3
Les trois boîtes flottent à gauche
La boîte 1 flotte à gauche
La boîte 2 est
masquée sous
la boîte 1.
Figure 3.14
Exemple d’éléments flottant à gauche.
Si.le.bloc.conteneur.est.trop.étroit.pour.que.tous.les.éléments.flottants.tiennent.à.l’horizontale,.le.reste.des.éléments.flottants.est.renvoyé.plus.bas,.jusqu’à.ce.qu’il.y.ait.assez.de.place.
(voir.Figure 3.15)..Si.les.éléments.flottants.possèdent.des.hauteurs.différentes,.des.éléments.
flottants.viennent.buter.sur.d’autres.éléments.flottants.en.se.décalant.vers.le.bas..