Quelles méthodes de blocage du flux (clearing) connaissez-vous et dans quelles situations sont-elles utilisées?

• overflow: hidden; ou overflow: auto; : S'applique à l'élément parent d'un ou plusieurs éléments avec float. Crée un nouveau contexte de formatage de bloc (BFC), obligeant le parent à inclure les éléments qui l'entourent dans sa hauteur.

Situation : La méthode la plus simple pour masquer le contenu dépassant les limites de l'élément ou appliquer un défilement, mais elle fonctionne aussi comme méthode de nettoyage.

• clear: both; : S'applique à un élément qui ne doit pas entourer les éléments précédents avec float. Cet élément sera placé en dessous de tous les éléments qui l'entourent.

Situation : Lorsqu'il faut créer une nouvelle ligne ou section après des éléments qui s'entourent mutuellement.

• Méthode clearfix (pseudo-éléments ::after) : Ajoute un pseudo-élément au conteneur parent avec des propriétés spécifiques, imitant le comportement de clear: both;, mais sans ajouter d'éléments HTML supplémentaires.

.clearfix::after {
    content: ""; /* Contenu obligatoire pour afficher le pseudo-élément */
    display: table; /* Crée un nouveau contexte de bloc, comme overflow: hidden; */
    clear: both; /* Applique le nettoyage */
}

Situation : La méthode la plus courante et recommandée pour le nettoyage, qui est propre et ne perturbe pas la structure du balisage. S'applique à l'élément parent contenant des éléments qui entourent.

• Utilisation de display: flex ou display: grid : Méthodes modernes de mise en page qui ne nécessitent pas de flot pour positionner les éléments, éliminant ainsi le besoin de nettoyage. Situation : Lors de la construction de mises en page complexes ou lorsque vous avez besoin d'un contrôle plus flexible de la disposition des éléments.

• Ajout d'un élément supplémentaire avec clear: both; (ancienne méthode) : Insère un élément HTML vide après les éléments qui entourent et lui applique clear: both;. Situation : Considérée comme une approche obsolète et indésirable, car elle ajoute du HTML redondant.