Apprends comment fonctionnent les propriétés CSS float et clear, y compris le hack clearfix classique, et comprends quand utiliser les floats plutôt que les méthodes de mise en page modernes comme Flexbox et Grid.
La propriété float a été conçue à l'origine pour permettre au texte de s'enrouler autour des images, de la même manière que le texte s'enroule autour des figures dans la mise en page imprimée. Un élément flotté est retiré du flux normal du document et déplacé vers le bord gauche ou droit de son conteneur.
Valeurs de float :
left — L'élément flotte à gauche ; le contenu environnant s'écoule autour de son côté droit.right — L'élément flotte à droite ; le contenu environnant s'écoule autour de son côté gauche.none — La valeur par défaut. L'élément ne flotte pas..image {
float: left;
margin-right: 16px;
}Lorsque tu flottes un élément, il devient une boîte de niveau bloc indépendamment de sa valeur display d'origine. Les éléments inline qui suivent un float s'enrouleront autour de lui, tandis que les éléments block peuvent glisser en dessous du float à moins qu'ils ne soient cleared.
<style>
.float-left {
float: left;
width: 150px;
height: 100px;
margin-right: 16px;
background: #6366f1;
}
.clear-both {
clear: both;
}
/* Le hack clearfix — appliqué au PARENT */
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
<div class="clearfix">
<div class="float-left"></div>
<p>This text wraps around the floated box.</p>
</div>
<p class="clear-both">This paragraph starts below the float.</p>La propriété clear empêche un élément de se positionner à côté d'un élément flotté. Elle force l'élément cleared à se déplacer en dessous de tous les floats précédents.
Valeurs de clear :
left — Clear les éléments flottés à gauche.right — Clear les éléments flottés à droite.both — Clear les floats de chaque côté.none — La valeur par défaut ; pas de comportement de clearing.Un problème courant avec les floats est l'effondrement du conteneur. Si tous les enfants d'un conteneur sont flottés, la hauteur du conteneur s'effondre à zéro car les éléments flottés sont retirés du flux normal.
Le hack clearfix résout ce problème en ajoutant un pseudo-élément après le contenu du conteneur qui clear les floats :
.clearfix::after {
content: "";
display: table;
clear: both;
}Aujourd'hui, Flexbox et Grid ont largement remplacé les floats pour les besoins de mise en page. Les floats restent parfaitement valides pour enrouler du texte autour d'images, ce qui est leur usage d'origine et le plus sémantique.
Quel problème le hack clearfix résout-il ?