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

float supprime un élément du flux normal du document, permettant à d'autres éléments (généralement du texte ou en ligne) de l'entourer du côté spécifié par la propriété (left, right).

Principes de base :

• Suppression du flux : Un élément avec float ne prend pas de place dans le flux normal du document.
• Enveloppement : Les éléments de bloc adjacents ne prendront pas la place de l'élément avec float, et leur contenu (éléments en ligne) l'entourera du côté spécifié.
• Influence sur le parent : La hauteur du conteneur parent, ne contenant que des éléments flottants, peut se réduire à zéro, en ignorant leur hauteur.
• clear : La propriété clear (left, right, both) est utilisée pour empêcher l'entourage par des éléments situés après l'élément flottant.

Exemple :

.image {
  float: left; /* L'image est décalée à gauche */
  margin-right: 10px; /* Ajout d'une marge à droite pour le texte */
}

.text {
  /* Le texte entourera l'image */
}

Recommandations :

• L'utilisation de float est en déclin pour la création de mises en page complexes et a été remplacée par Flexbox ou Grid.
• float peut encore être utile pour créer un effet d'entourage d'images par du texte.
• Pour éviter que le conteneur parent ne s'effondre lors de l'utilisation de float, on emploie des techniques comme "clearfix" ou overflow: hidden/auto sur le parent.