La clear
propriété est directement liée aux flotteurs. Si l'élément peut tenir horizontalement dans l'espace à côté d'un autre élément flottant, il le fera. Sauf si vous appliquez clear
à cet élément dans la même direction que le flotteur. Ensuite, l'élément descendra en dessous de l'élément flottant.
Voici un exemple simple de mise en page construite avec des flottants, ce qui pourrait poser problème pour le pied de page:
![](6350926/clear_css-tricks_2.png.webp)
![](6350926/clear_css-tricks_2.png.webp)
Mais en effaçant l'élément de pied de page, la mise en page se met en place:
#footer ( clear: both; )
![](6350926/clear_css-tricks_3.png.webp)
![](6350926/clear_css-tricks_3.png.webp)
Dans ce cas, effacez: les deux; a été utilisé pour s'assurer que le pied de page efface les éléments qui flottent dans les deux sens. Mais vous pouvez également effacer l'un left
ou l' autre ou right
auquel cas l'élément se déplacera sous les éléments qui flottent dans cette direction, mais pas dans l'autre.
![](6350926/clear_css-tricks_4.png.webp)
![](6350926/clear_css-tricks_4.png.webp)
Un moyen courant d'effacer les flottants consiste à appliquer un pseudo-élément à un élément conteneur qui efface le flotteur. Apprenez-en plus ici.
Prise en charge du navigateur
La clear
propriété fonctionne dans tous les navigateurs.