54
Maîtrise des CSS
boîte 1
Boîtes de différentes hauteurs
Pas assez d'espace horizontal
boîte 3
boîte 2
boîte 1
boîte 3
boîte 2
La boîte 3 bute
sur la boîte 1
La boîte 3 passe en dessous
Figure 3.15
S’il n’y a pas assez d’espace sur le plan horizontal, les éléments flottants se décalent vers le bas jusqu’à
trouver de la place.
Boîtes de ligne et dégagement
À.la.précédente.section,.vous.avez.vu.que.le.flottement.d’un.élément.le.sortait.du.flot.du.
document.et.qu’il.n’y.exerçait.donc.plus.d’effet.sur.les.éléments.non.flottants..En.réalité,.
ce.n’est.pas.exactement.vrai..Si.un.élément.flottant.est.suivi.par.un.élément.dans.le.flot.du.
document,.sa.boîte.se.comporte.comme.si.le.flottement.n’existait.pas..Le.contenu.textuel.de.
la.boîte.conserve.néanmoins.en.mémoire.la.présence.de.l’élément.flottant.et.se.décale.afin.de.
lui.laisser.de.la.place..En.termes.techniques,.une.boîte.de.ligne.adjacente.à.un.élément.flottant.est.raccourcie.afin.de.faire.place.à.l’élément.flottant.et.d’habiller.ainsi.la.boîte.flottante..
En.fait,.les.éléments.flottants.ont.été.créés.pour.permettre.au.texte.d’habiller.les.images.en.
les.bordant.(voir.Figure 3.16).
Pas de boîte flottante
Image flottante à gauche
Les boîtes de ligne
se racourcissent
pour faire de la place
à la boîte flottante
Figure 3.16
Les boîtes de ligne se raccourcissent à côté des éléments flottants.
Pour.empêcher.les.boîtes.de.ligne.de.courir.le.long.des.boîtes.flottantes,.vous.devez.appliquer.une.propriété.clear.à.l’élément.qui.contient.ces.boîtes.de.ligne..La.propriété.clear.
peut.valoir.left,.right,.both.ou.none..Elle.indique.le.côté.de.la.boîte.qui.ne.doit.pas.se.
trouver.à.côté.d’une.boîte.flottante..J’ai.toujours.considéré.cette.propriété.comme.une.sorte.
de.drapeau.magique.qui.annulait.automatiquement.le.flottement.précédent..En.réalité,.c’est.
encore.plus.intéressant..Lorsque.vous.dégagez.un.élément.avec.la.propriété.clear,.le.navigateur.ajoute.suffisamment.de.marge.au-dessus.pour.décaler.sa.bordure.supérieure.vers.le.
bas,.au-delà.de.l’élément.flottant.(voir.Figure 3.17)..
Maîtrise des CSS
boîte 1
Boîtes de différentes hauteurs
Pas assez d'espace horizontal
boîte 3
boîte 2
boîte 1
boîte 3
boîte 2
La boîte 3 bute
sur la boîte 1
La boîte 3 passe en dessous
Figure 3.15
S’il n’y a pas assez d’espace sur le plan horizontal, les éléments flottants se décalent vers le bas jusqu’à
trouver de la place.
Boîtes de ligne et dégagement
À.la.précédente.section,.vous.avez.vu.que.le.flottement.d’un.élément.le.sortait.du.flot.du.
document.et.qu’il.n’y.exerçait.donc.plus.d’effet.sur.les.éléments.non.flottants..En.réalité,.
ce.n’est.pas.exactement.vrai..Si.un.élément.flottant.est.suivi.par.un.élément.dans.le.flot.du.
document,.sa.boîte.se.comporte.comme.si.le.flottement.n’existait.pas..Le.contenu.textuel.de.
la.boîte.conserve.néanmoins.en.mémoire.la.présence.de.l’élément.flottant.et.se.décale.afin.de.
lui.laisser.de.la.place..En.termes.techniques,.une.boîte.de.ligne.adjacente.à.un.élément.flottant.est.raccourcie.afin.de.faire.place.à.l’élément.flottant.et.d’habiller.ainsi.la.boîte.flottante..
En.fait,.les.éléments.flottants.ont.été.créés.pour.permettre.au.texte.d’habiller.les.images.en.
les.bordant.(voir.Figure 3.16).
Pas de boîte flottante
Image flottante à gauche
Les boîtes de ligne
se racourcissent
pour faire de la place
à la boîte flottante
Figure 3.16
Les boîtes de ligne se raccourcissent à côté des éléments flottants.
Pour.empêcher.les.boîtes.de.ligne.de.courir.le.long.des.boîtes.flottantes,.vous.devez.appliquer.une.propriété.clear.à.l’élément.qui.contient.ces.boîtes.de.ligne..La.propriété.clear.
peut.valoir.left,.right,.both.ou.none..Elle.indique.le.côté.de.la.boîte.qui.ne.doit.pas.se.
trouver.à.côté.d’une.boîte.flottante..J’ai.toujours.considéré.cette.propriété.comme.une.sorte.
de.drapeau.magique.qui.annulait.automatiquement.le.flottement.précédent..En.réalité,.c’est.
encore.plus.intéressant..Lorsque.vous.dégagez.un.élément.avec.la.propriété.clear,.le.navigateur.ajoute.suffisamment.de.marge.au-dessus.pour.décaler.sa.bordure.supérieure.vers.le.
bas,.au-delà.de.l’élément.flottant.(voir.Figure 3.17)..