Syntaxe
Paramètres
Paramètre |
Description |
paramètres |
Ce paramètre de propriété permet d'indiquer le type d'effacement : |
both |
Cette valeur permet d'indiquer que la flottaison de la balise est du côté gauche et droite. |
left |
Cette valeur permet d'indiquer que la flottaison de la balise est du côté gauche. |
right |
Cette valeur permet d'indiquer que la flottaison de la balise est du côté droite. |
inherit |
Cette valeur permet d'indiquer qu'il faut hériter de la balise parent. C'est la valeur par défaut. |
Description
Cette propriété permet d'indiquer qu'il n'y est pas de flottaison de balise à la droite ou à la gauche d'une image.
Remarques
- Gestion du flot des éléments flottants : La propriété clear permet de contrôler le comportement d'un élément par rapport aux éléments flottants le précédant.
Par exemple, en utilisant clear: left;, l'élément se placera sous tout élément flottant à gauche. C'est une solution indispensable pour éviter que des éléments flottants
perturbent l'alignement ou la structure globale.
- Valeurs disponibles pour clear : Les principales valeurs de clear sont none, left, right, et both. none désactive l'effet
de la propriété, tandis que both force l'élément à se placer sous tous les éléments flottants, quelle que soit leur direction. Choisissez la valeur appropriée pour garantir
une mise en page propre et alignée avec vos besoins.
- Utilisation après des éléments flottants : L'un des usages courants de clear est de résoudre les problèmes causés par des éléments flottants. Par exemple,
après une série d'éléments avec float: left;, utiliser clear: both; garantit que l'élément suivant s'affiche sous ces éléments. C'est une technique classique dans
les mises en page basées sur des flottants.
- Interaction avec le modèle de boîte : Lorsque clear est utilisé, il affecte uniquement le positionnement vertical de l'élément. Cela signifie que
clear n'a pas d'impact direct sur la largeur, la hauteur ou les marges des éléments. Cependant, il peut être combiné avec d'autres propriétés pour ajuster la disposition
globale.
- Compatibilité avec les designs modernes : Bien que clear reste utile, il est souvent remplacé dans les designs modernes par des solutions comme
Flexbox ou Grid. Ces outils modernes offrent des fonctionnalités plus avancées et n'ont pas besoin de clear pour gérer les alignements. Toutefois, clear
reste pertinent pour le support des projets hérités ou utilisant des designs basés sur des flottants.
- Technique du clearfix : Une méthode populaire pour résoudre les problèmes d'éléments flottants est d'utiliser un "clearfix". Cette technique consiste à appliquer
clear: both; à un pseudo-élément après un conteneur contenant des flottants. Elle garantit que le conteneur s'ajuste correctement à la hauteur des éléments flottants qu'il
contient.
- Attention à l'accessibilité et à la lisibilité : L'utilisation incorrecte de clear peut entraîner des chevauchements ou des dispositions visuelles
inattendues. Cela peut nuire à la lisibilité et à l'expérience utilisateur, surtout sur des appareils mobiles. Assurez-vous de tester votre mise en page sur différentes tailles
d'écran pour garantir un rendu cohérent.
- Alternatives modernes à clear : Pour les nouveaux projets, privilégiez les solutions comme flex ou grid, n'ayant pas besoin de clear pour gérer
les alignements. Cependant, dans des cas spécifiques ou pour le support des anciens navigateurs Web, clear reste une propriété utile. Il est important de connaître cette
propriété pour travailler efficacement avec des codes CSS existants ou plus anciens.
Dernière mise à jour : Dimanche, le 20 décembre 2015