Le positionnement en CSS
CHAPITRE 7
117
Ce comportement des éléments flottants est normal mais pose souvent des problèmes. On recourra alors à la propriété clear, qui interdit le voisinage d’un flottant.
Ses trois valeurs possibles (left, right, both) portent respectivement sur les côtés
gauche, droit, gauche et droit. L’instruction clear: left interdit tout flottant à
gauche ; clear: both interdit tout flottant au même niveau. L’élément concerné est
alors poussé vers le bas jusqu’à ce qu’il satisfasse les conditions qui lui sont imposées.
Testons cette propriété en plaçant une ligne horizontale (
) sous les flottants.
Pour cela, elle devra recevoir la propriété clear: both ;
Le code HTML suivant :
produit alors le résultat recherché (on n’oubliera pas de supprimer la hauteur explicite
du bloc
CHAPITRE 7
117
Ce comportement des éléments flottants est normal mais pose souvent des problèmes. On recourra alors à la propriété clear, qui interdit le voisinage d’un flottant.
Ses trois valeurs possibles (left, right, both) portent respectivement sur les côtés
gauche, droit, gauche et droit. L’instruction clear: left interdit tout flottant à
gauche ; clear: both interdit tout flottant au même niveau. L’élément concerné est
alors poussé vers le bas jusqu’à ce qu’il satisfasse les conditions qui lui sont imposées.
Testons cette propriété en plaçant une ligne horizontale (
) sous les flottants.
Pour cela, elle devra recevoir la propriété clear: both ;
Le code HTML suivant :
produit alors le résultat recherché (on n’oubliera pas de supprimer la hauteur explicite
du bloc
pour que celle-ci s’adapte automatiquement à son contenu). Le conteneur s’est bien étiré jusqu’à inclure la ligne horizontale. On peut ensuite la cacher à
l’aide de la déclaration visibility: hidden, précisant de masquer l’élément concerné sur les navigateurs graphiques :
Figure 7–18
Débordement de bloc
par des flottants
.separation {
clear: both;
}
.separation {
clear: both;
visibility: hidden;
}
l’aide de la déclaration visibility: hidden, précisant de masquer l’élément concerné sur les navigateurs graphiques :
Figure 7–18
Débordement de bloc
par des flottants
.separation {
clear: both;
}
premier paragraphe de texte
deuxième paragraphe de texte deuxième paragraphe de texte
deuxième paragraphe de texte deuxième paragraphe de texte
.separation {
clear: both;
visibility: hidden;
}