clear
Force un élément à descendre sous les éléments flottants qui le précèdent.
- Valeur initiale
none- Héritée
- Non
- Animable
- non
- S’applique à
- éléments de bloc
- JavaScript
element.style.clear = "both"
Exemple
#.article footer {
clear: both;
}<div class="article" style="display: flow-root;">
<div class="box" style="float: left; width: 80px; height: 80px; margin-right: 12px;">Photo</div>
<p style="margin-top: 0">Un court paragraphe à côté de la photo.</p>
<footer style="clear: both; padding-top: 8px; color: #a3a3a3;">Le pied de page commence sous la photo.</footer>
</div>Définition et utilisation
#La propriété clear indique à un élément de bloc de ne pas se placer à côté des éléments flottants, mais de descendre sous eux. Vous pouvez choisir s’il s’agit des éléments flottants à gauche, à droite, ou des deux côtés.
Un usage typique est le pied de page d’un article, ou la section suivante, qui ne doit pas contourner l’image du paragraphe précédent.
Dans les mises en page modernes, elle est rarement nécessaire, car Flexbox et Grid n’utilisent pas les flottants. Elle reste toutefois utile dans les contenus avec des images contournées par le texte.
Syntaxe
#clear: none | left | right | both | inline-start | inline-end;Valeurs
#Valeurs en pratique
#none
.demo { clear: none; }left
.demo { clear: left; }right
.demo { clear: right; }both
.demo { clear: both; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Sur le parent, au lieu d’un élément supplémentaire avec
clear: both, utilisezdisplay: flow-root. clearne fonctionne que sur les éléments de bloc, il n’a aucun effet sur<span>.
Entrées associées
#Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.