Comment - Effacer les flotteurs (Clearfix)
Apprenez à effacer les flottants avec le hack "clearfix".
Comment effacer les flotteurs (Clearfix)
Les éléments après un élément flottant circuleront autour de lui. Utilisez le hack "clearfix" pour résoudre le problème :
Sans Clearfix
Avec Clearfix
Le hack clearfix
Si un élément est plus grand que l'élément qui le contient et qu'il flotte, il débordera de son conteneur.
Ensuite, nous pouvons ajouter overflow: auto;
à l'élément conteneur pour résoudre ce problème :
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;
}
Tip: Learn more about floats in our CSS Float Tutorial.