Clearfix
La classe .clearfix force un conteneur à englober ses enfants flottants. Sans elle, un parent dont tous les enfants sont flottants s’effondre à une hauteur nulle.
Quand un élément reçoit .float-start ou .float-end, il sort du flux normal : le parent ne tient plus compte de sa hauteur. .clearfix ajoute un pseudo-élément ::after qui « nettoie » les flottants et rend au parent sa hauteur réelle.
Pour des mises en page nouvelles, préférez Flexbox ou la grille : le clearfix sert surtout quand un flottant est indispensable, par exemple un visuel placé à côté d’un texte qui l’entoure.
Sans clearfix#
Le cadre gris devrait entourer la pastille, mais il reste réduit à sa bordure : la pastille déborde.
<div class="bg-body-secondary border p-2">
<div class="float-start text-bg-primary px-3 py-2">Épargne : 1 250 000 FCFA</div>
</div>Avec clearfix#
Avec .clearfix sur le parent, le cadre entoure bien le montant flottant.
<div class="bg-body-secondary border p-2 clearfix">
<div class="float-start text-bg-primary px-3 py-2">Épargne : 1 250 000 FCFA</div>
</div>Un cas bancaire#
Un bandeau de compte où le solde flotte à droite et le libellé à gauche : le clearfix garde le bandeau à la bonne hauteur.
<div class="border rounded p-3 clearfix">
<span class="float-start fw-semibold">Compte courant 0012-4587</span>
<span class="float-end text-success fw-bold">+ 480 000 FCFA</span>
</div>Mixin Sass#
La même règle est disponible comme mixin pour vos propres composants.
.releve-compte {
@include clearfix();
}Référence
| Élément | Rôle | Détail |
|---|---|---|
.clearfix | Classe à poser sur le parent des flottants | Ajoute ::after avec display: block, clear: both et content: "". |
@include clearfix() | Mixin Sass équivalent | À utiliser dans vos propres sélecteurs. |
.float-start, .float-end | Flottants à nettoyer | Voir Flottement. |