Mise en page CSS - clear et clearfix
La propriété claire
Lorsque nous utilisons la floatpropriété et que nous voulons l'élément suivant en dessous (ni à droite ni à gauche), nous devrons utiliser la clear
propriété.
La clearpropriété spécifie ce qui doit se passer avec l'élément qui est à côté d'un élément flottant.
La clearpropriété peut avoir l'une des valeurs suivantes :
-
none- L'élément n'est pas poussé sous les éléments flottants gauche ou droit. C'est par défaut -
left- L'élément est poussé sous les éléments flottants à gauche -
right- L'élément est poussé sous les éléments flottants à droite -
both- L'élément est poussé sous les éléments flottants gauche et droit -
inherit- L'élément hérite de la valeur clear de son parent
Lorsque vous effacez des flottants, vous devez faire correspondre l'effacement au flottant : si un élément flotte vers la gauche, vous devez effacer vers la gauche. Votre élément flottant continuera à flotter, mais l'élément effacé apparaîtra en dessous sur la page Web.
Exemple
Cet exemple efface le flotteur à gauche. Ici, cela signifie que l'élément <div2> est poussé sous l'élément <div1> flottant à gauche :
div1 {
float: left;
}
div2 {
clear: left;
}
Le hack clearfix
Si un élément flottant est plus grand que l'élément contenant, il "débordera" en dehors de son conteneur. On peut alors ajouter un hack clearfix pour résoudre ce problème :
Sans Clearfix
Avec Clearfix
Exemple
.clearfix {
overflow: auto;
}
The overflow: auto clearfix works well as long as you are able to keep control of your margins and padding (else you
might see scrollbars). The
new, modern clearfix hack however, is safer to use, and the following code is used for most webpages:
Example
.clearfix::after {
content: "";
clear: both;
display: table;
}
You will learn more about the ::after pseudo-element in a later chapter.