55
Vue d’ensemble du modèle de formatage visuel
Le second paragraphe est dégagé
Le second paragraphe est dégagé
Marge ajoutée pour dégager
l'élément flottant
Figure 3.17
Le dégagement de la marge supérieure d’un élément crée suffisamment d’espace vertical pour l’élément
flottant précédent.
Comme.vous.pouvez.le.voir,.les.éléments.flottants.sortent.du.flux.du.document.et.n’ont.pas.
d’effet.sur.les.éléments.qui.les.entourent..Toutefois,.le.dégagement.d’un.élément.dégage.en.
fait.un.espace.vertical.pour.tous.les.éléments.flottants.précédents.
Ce.mécanisme.peut.être.utile.pour.la.mise.en.page.car.il.permet.aux.éléments.alentour.de.
faire.de.la.place.aux.éléments.flottants..Il.permet.également.de.résoudre.le.problème.signalé.
précédemment.avec.le.positionnement.absolu,.où.les.modifications.de.hauteur.n’affectent.
pas.les.éléments.alentour.et.peuvent.rompre.les.équilibres.de.la.mise.en.page.
Considérons.un.peu.plus.précisément.cette.question.des.éléments.flottants.et.de.la.propriété.
clear..Supposons.que.vous.ayez.une.image.et.que.vous.souhaitiez.la.faire.flotter.à.gauche.
d’un.bloc.de.texte..Vous.voulez.que.cette.image.et.le.texte.soient.contenus.dans.un.autre.
élément.avec.une.couleur.d’arrière-plan.et.une.bordure..D’emblée,.vous.tenterez.sans.doute.
de.procéder.comme.ceci :
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}

Pourtant,.comme.les.éléments.flottants.sont.sortis.du.flot.du.document,.la.div.qui.les.enveloppe. ne. prend. aucun. espace.. Dans. ce. cas,. comment. faire. pour. que. l’enveloppe. englobe.