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

Les éléments flottants (float) en CSS sont une propriété qui permet de déplacer un élément hors du flux normal du document et de le positionner à gauche ou à droite de son conteneur. Les éléments adjacents et le texte entoureront cet élément flottant.

Principales valeurs de la propriété float :

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

Exemples d'utilisation :

.float-left {
  float: left; /* L'élément flottera à gauche */
  margin-right: 10px; /* Ajoute une marge à droite pour le texte */
}

.float-right {
  float: right; /* L'élément flottera à droite */
  margin-left: 10px; /* Ajoute une marge à gauche pour le texte */
}

Caractéristiques du comportement :

• L'élément flottant est retiré du flux standard du document, mais influence la disposition des éléments et du texte adjacents.
• Le parent de l'élément flottant peut 'se rétracter', car les enfants flottants n'affectent pas sa hauteur dans le flux normal. Pour éviter cela, on utilise des techniques comme clear ou d'autres, par exemple, overflow: hidden ou Flexbox/Grid.
• La propriété clear permet de spécifier de quel côté les éléments flottants ne doivent pas se trouver :

  .clear-left {
    clear: left; /* L'élément sera placé en dessous de tout élément flottant à gauche */
  }
  
  .clear-right {
    clear: right; /* L'élément sera placé en dessous de tout élément flottant à droite */
  }
  
  .clear-both {
    clear: both; /* L'élément sera placé en dessous de tout élément flottant */
  }
  

Historiquement, les éléments flottants étaient utilisés pour créer des mises en page à colonnes multiples, mais il est maintenant préférable d'utiliser Flexbox ou CSS Grid pour leur meilleure flexibilité et prévisibilité. Cependant, float reste utile pour faire contourner du texte autour d'images ou d'autres éléments.