Qu'est-ce que les éléments flottants (floats) en CSS?

Float en CSS est une propriété qui permet à un élément de "nager" à gauche ou à droite du contenu qui l'entoure.

Caractéristiques principales :

• Décalage : L'élément avec la propriété float appliquée se déplace vers le bord gauche ou droit de son conteneur parent (ou d'un autre élément flottant).
• Enveloppement : Le contenu en bloc ou en ligne normal (texte, images) entoure l'élément flottant.
• Contexte de flux : Les éléments flottants sortent partiellement du flux normal du document, mais influencent la position des autres éléments.
• Application : Initialement utilisé pour organiser des colonnes ou placer des images avec du texte autour. Dans la conception moderne, Flexbox ou Grid sont plus couramment utilisés.

Valeurs typiques de la propriété float :

• left : L'élément flotte à gauche.
• right : L'élément flotte à droite.
• none : L'élément ne flotte pas (valeur par défaut).
• inherit : Hérite de la valeur du parent.
• initial : Définit la valeur par défaut.

Problèmes avec float :

• Effondrement du parent : Le conteneur parent contenant uniquement des éléments flottants peut s'effondrer en hauteur.
• Nettoyage : Pour empêcher l'enveloppement par les éléments suivants, il faut utiliser la propriété clear.

.image-float {
  float: left; /* L'image flottera à gauche */
  margin-right: 10px; /* Marge à droite de l'image */
}

.text-content {
  /* Ce texte entourera l'image */
}

.clearfix::after {
  content: "";
  display: table;
  clear: both; /* Nettoyage de l'enveloppement après les éléments flottants */
}