Quelles méthodes d'interdiction de l'écoulement (clearing) connaissez-vous et où sont-elles utilisées?

• clear: both; : La méthode la plus courante et fiable. S’applique à un élément qui doit se placer en dessous de tous les éléments flottants précédents. Cela peut être un élément vide séparé ou l’un des éléments de la mise en page.
• Ajout d’un élément vide avec clear: both; : Parfois utilisé pour garantir la suppression du flux, surtout lors de travaux avec des mises en page complexes. Il s’agit d’un div vide ou d’un autre élément de bloc.
• Pseudo-élément :after avec clear: both; : Approche plus moderne. S’applique au conteneur d’éléments flottants. Crée un "élément virtuel" après le contenu final du conteneur, supprimant ainsi le flux interne.

/* Exemple d’utilisation du pseudo-élément :after */
.container::after {
  content: ""; /* Propriété obligatoire pour les pseudo-éléments */
  display: table; /* Souvent utilisé pour une meilleure compatibilité */
  clear: both;
}

• overflow: hidden; ou overflow: auto; : S’applique au conteneur d’éléments flottants. Crée un nouveau contexte de formatage de bloc qui "nettoie" le flux interne. Cependant, cela peut couper le contenu ou créer des barres de défilement si le contenu dépasse les limites du conteneur.
• Contexte de formatage de bloc (BFC) : Toutes les méthodes ci-dessus, sauf l’élément vide explicite, créent d’une manière ou d’une autre un nouveau BFC, ce qui conduit à la suppression du flux. Propriétés qui créent un BFC :
  • float (valeur différente de zéro)
  • overflow (valeur différente de visible)
  • display: inline-block
  • position: absolute ou fixed
  • display: flow-root; (plus récent, crée explicitement un BFC)

Tableau comparatif des méthodes :

Méthode	Application à quoi	Mode de suppression	Problèmes potentiels
clear: both;	Élément	Suppression explicite	Élément supplémentaire
Élément vide + clear	Élément vide	Suppression explicite	Élément supplémentaire
:after + clear	Conteneur	Pseudo-élément	Plus difficile à comprendre pour les débutants
overflow: hidden/auto;	Conteneur	Création de BFC	Recadrage / barres de défilement
Création de BFC avec une autre propriété	Conteneur	Création de BFC	Non intentionnel, effets secondaires
display: flow-root;	Conteneur	Création explicite de BFC	Support limité dans les anciens navigateurs

Où s’appliquent :

• Pour que l’élément après les éléments flottants commence à s’afficher en dessous d’eux.
• Pour que le conteneur contenant uniquement des éléments flottants ne s’effondre pas en hauteur.
• Dans des mises en page complexes pour contrôler le flux du document autour des éléments flottants.