Comment fonctionnent les éléments flottants (floats)…

Les éléments flottants (floats) en CSS sortent du flux normal du document et sont déplacés dans la direction spécifiée (vers la gauche ou vers la droite) à l’intérieur de leur conteneur. Les éléments en ligne adjacents et le contenu commencent à entourer l’élément flottant depuis le côté opposé.

Propriétés principales de float:

left : L’élément est déplacé à gauche.
right : L’élément est déplacé à droite.
none : L’élément reste dans le flux normal (valeur par défaut).
inherit : Hérite de la valeur du parent.

Ils étaient souvent utilisés pour créer des mises en page à plusieurs colonnes avant l’apparition de Flexbox et Grid.

Caractéristiques de comportement:

L’élément flottant devient un bloc, indépendamment du type d’affichage initial.
La hauteur du conteneur parent ne prend pas en compte la hauteur de l’élément flottant, ce qui peut entraîner un « effondrement » du conteneur. Pour résoudre ce problème, on utilise des méthodes de nettoyage (clearing).

Méthodes de nettoyage (clearing):

Propriété clear : Appliquée à un élément pour empêcher qu’il soit entouré par des éléments flottants. Valeurs : left, right, both, none, inherit.
```
/* L’élément ne sera pas entouré par des éléments flottants des deux côtés */
.clear-both {
  clear: both;
}
```
Réinitialisation du flux (technique clearfix) : Ajout d’un pseudo-élément :after au conteneur parent avec clear: both et d’autres styles pour éviter l’effondrement.
```
/* clearfix classique */
.clearfix::after {
  content: "";
  display: table; /* ou "block" */
  clear: both;
}
```

Malgré l’émergence de méthodes de mise en page plus modernes, float peut encore être utile pour de petits éléments, par exemple, pour placer une image dans du texte.

Comment fonctionnent les éléments flottants (floats) en CSS?