¿Qué métodos de bloqueo de flujo (clearing) conoces y en qué situaciones se aplican?

• overflow: hidden; o overflow: auto;: Se aplica al elemento padre de un elemento(s) con float. Crea un nuevo contexto de formato de bloque (BFC), haciendo que el padre incluya los elementos que lo rodean en su altura.

Situación: La forma más sencilla cuando se necesita ocultar contenido que sobresale de los límites del elemento, o aplicar desplazamiento, pero también funciona como método de limpieza.

• clear: both;: Se aplica a un elemento que no debe rodear a los elementos anteriores con float. Este elemento se colocará debajo de todos los elementos que lo rodean.

Situación: Cuando se necesita crear una nueva línea o sección después de elementos que se rodean entre sí.

• Método clearfix (pseudo-elementos ::after): Añade un pseudo-elemento al contenedor padre con propiedades específicas, imitando el comportamiento de clear: both;, pero sin necesidad de agregar elementos HTML adicionales.

.clearfix::after {
    content: ""; /* Contenido obligatorio para mostrar el pseudo-elemento */
    display: table; /* Crea un nuevo contexto de bloque, como overflow: hidden; */
    clear: both; /* Aplica la limpieza */
}

Situación: La forma más común y recomendada de limpiar, que es limpia y no rompe la estructura del marcado. Se aplica al elemento padre que contiene elementos que rodean.

• Uso de display: flex o display: grid: Métodos modernos de diseño que no requieren rodear para colocar elementos, eliminando así la necesidad de limpiar. Situación: Al construir diseños complejos o cuando se requiere un control más flexible de la disposición de los elementos.

• Añadir un elemento adicional con clear: both; (método antiguo): Inserta un elemento HTML vacío después de los elementos que rodean y le aplica clear: both;. Situación: Se considera un enfoque obsoleto y no deseado, ya que añade HTML redundante.