57
Vue d’ensemble du modèle de formatage visuel
Au.lieu.de.dégager.le.texte.et.l’image.qui.flottent,.vous.pouvez.choisir.de.faire.flotter.la.div.
conteneur.également :
.news {
background-color: gray;
border: solid 1px black;
float: left;
}
.news img {
float: left;
}
.news p {
float: right;
}
Vous.obtenez.alors.l’effet.souhaité.mais,.du.coup,.c’est.l’élément.suivant.qui.est.maintenant.
affecté.par.le.flottement..Pour.résoudre.ce.problème,.certains.développeurs.choisissent.de.faire.
flotter.presque.tous.les.éléments.de.leur.maquette,.puis.dégagent.ces.éléments.flottants.avec.
un.élément.qui.a.sa.raison.d’être.sémantique,.comme.le.pied.de.page.du.site..Cette.approche.
réduit. ou. élimine. les. balises. superflues,. mais. le. flottement. peut. être. compliqué. et. certains.
navigateurs.plus.anciens.ont.de.la.peine.avec.les.mises.en.page.flottantes.complexes..C’est.la.
raison.pour.laquelle.bien.des.concepteurs.se.résignent.à.utiliser.quelques.balises.superflues.
La.propriété.overflow.définit.la.manière.dont.un.élément.est.censé.se.comporter.si.le.contenu.
englobé.est.trop.grand.pour.les.dimensions.spécifiées..Par.défaut,.le.contenu.déborde.de.la.
boîte,.en.chevauchant.l’espace.adjacent..Mais.l’un.des.effets.secondaires.liés.à.l’application.
des.valeurs.hidden.ou.auto.à.la.propriété.overflow.tient.à.ce.que.se.trouvent.ainsi.dégagés.
tous.les.éléments.flottants.qui.y.sont.contenus..C’est.ainsi.un.moyen.utile.de.dégager.un.élément.sans.ajouter.de.balise.superflue..Cette.méthode.n’est.pas.toujours.la.plus.appropriée,.
car.la.définition.de.la.propriété.overflow.affecte.son.comportement..En.particulier,.elle.peut.
forcer.l’affichage.de.barres.de.défilement.ou.détourer.du.contenu.dans.certains.cas..
Certaines.personnes.ont.adopté.une.méthode.pour.dégager.les.éléments.flottants,.qui.consiste.
à. utiliser. du. contenu. généré. par. le. code. CSS. ou. par. un. script. JavaScript.. Le. concept. de.
base.est.alors.le.même..Au.lieu.d’ajouter.un.élément.qui.permet.d’effectuer.le.dégagement.
directement.dans.le.balisage,.vous.l’ajoutez.dynamiquement.à.la.page..Dans.les.deux.cas,.
vous.devez.indiquer.où.vient.se.placer.l’élément.à.dégager,.ce.qui.se.fait.généralement.avec.
l’ajout.d’un.nom.de.classe :
Vue d’ensemble du modèle de formatage visuel
Au.lieu.de.dégager.le.texte.et.l’image.qui.flottent,.vous.pouvez.choisir.de.faire.flotter.la.div.
conteneur.également :
.news {
background-color: gray;
border: solid 1px black;
float: left;
}
.news img {
float: left;
}
.news p {
float: right;
}
Du texte
Vous.obtenez.alors.l’effet.souhaité.mais,.du.coup,.c’est.l’élément.suivant.qui.est.maintenant.
affecté.par.le.flottement..Pour.résoudre.ce.problème,.certains.développeurs.choisissent.de.faire.
flotter.presque.tous.les.éléments.de.leur.maquette,.puis.dégagent.ces.éléments.flottants.avec.
un.élément.qui.a.sa.raison.d’être.sémantique,.comme.le.pied.de.page.du.site..Cette.approche.
réduit. ou. élimine. les. balises. superflues,. mais. le. flottement. peut. être. compliqué. et. certains.
navigateurs.plus.anciens.ont.de.la.peine.avec.les.mises.en.page.flottantes.complexes..C’est.la.
raison.pour.laquelle.bien.des.concepteurs.se.résignent.à.utiliser.quelques.balises.superflues.
La.propriété.overflow.définit.la.manière.dont.un.élément.est.censé.se.comporter.si.le.contenu.
englobé.est.trop.grand.pour.les.dimensions.spécifiées..Par.défaut,.le.contenu.déborde.de.la.
boîte,.en.chevauchant.l’espace.adjacent..Mais.l’un.des.effets.secondaires.liés.à.l’application.
des.valeurs.hidden.ou.auto.à.la.propriété.overflow.tient.à.ce.que.se.trouvent.ainsi.dégagés.
tous.les.éléments.flottants.qui.y.sont.contenus..C’est.ainsi.un.moyen.utile.de.dégager.un.élément.sans.ajouter.de.balise.superflue..Cette.méthode.n’est.pas.toujours.la.plus.appropriée,.
car.la.définition.de.la.propriété.overflow.affecte.son.comportement..En.particulier,.elle.peut.
forcer.l’affichage.de.barres.de.défilement.ou.détourer.du.contenu.dans.certains.cas..
Certaines.personnes.ont.adopté.une.méthode.pour.dégager.les.éléments.flottants,.qui.consiste.
à. utiliser. du. contenu. généré. par. le. code. CSS. ou. par. un. script. JavaScript.. Le. concept. de.
base.est.alors.le.même..Au.lieu.d’ajouter.un.élément.qui.permet.d’effectuer.le.dégagement.
directement.dans.le.balisage,.vous.l’ajoutez.dynamiquement.à.la.page..Dans.les.deux.cas,.
vous.devez.indiquer.où.vient.se.placer.l’élément.à.dégager,.ce.qui.se.fait.généralement.avec.
l’ajout.d’un.nom.de.classe :
Du texte