¿Qué métodos de prohibición de la circulación (clearing) conoces y dónde se aplican?

• clear: both;: El método más común y confiable. Se aplica a un elemento que debe colocarse debajo de todos los elementos flotantes anteriores. Esto puede ser un elemento vacío separado o uno de los elementos del diseño.
• Agregar un elemento vacío con clear: both;: A veces se usa para garantizar la eliminación del flujo, especialmente cuando se trabaja con diseños complejos. Es un div vacío u otro elemento de bloque.
• Pseudo-elemento :after con clear: both;: Enfoque más moderno. Se aplica al contenedor de elementos flotantes. Crea un "elemento virtual" después del contenido final del contenedor, eliminando así el flujo interno.

/* Ejemplo de uso del pseudo-elemento :after */
.container::after {
  content: ""; /* Propiedad obligatoria para pseudo-elementos */
  display: table; /* Comúnmente usado para mejor compatibilidad */
  clear: both;
}

• overflow: hidden; o overflow: auto;: Se aplica al contenedor de elementos flotantes. Crea un nuevo contexto de formato de bloque que "limpia" el flujo interno. Sin embargo, esto puede recortar el contenido o crear barras de desplazamiento si el contenido excede los límites del contenedor.
• Contexto de formato de bloque (BFC): Todos los métodos anteriores, excepto el elemento vacío explícito, crean de alguna manera un nuevo BFC, lo que conduce a la eliminación del flujo. Propiedades que crean BFC:
  • float (valor distinto de cero)
  • overflow (valor diferente de visible)
  • display: inline-block
  • position: absolute o fixed
  • display: flow-root; (relativamente nuevo, crea explícitamente un BFC)

Tabla comparativa de métodos:

Método	Aplicación a qué elemento	Método de eliminación	Problemas potenciales
clear: both;	Elemento	Eliminación explícita	Elemento adicional
Elemento vacío + clear	Elemento vacío	Eliminación explícita	Elemento adicional
:after + clear	Contenedor	Pseudo-elemento	Más difícil de entender para principiantes
overflow: hidden/auto;	Contenedor	Creación de BFC	Recorte/barras de desplazamiento
Crear BFC con otra propiedad	Contenedor	Creación de BFC	No intencional, efectos secundarios
display: flow-root;	Contenedor	Creación explícita de BFC	Soporte incompleto en navegadores antiguos

Dónde se aplican:

• Para que un elemento después de elementos flotantes comience a mostrarse debajo de ellos.
• Para que un contenedor que solo contiene elementos flotantes no colapse en altura.
• En diseños complejos para controlar el flujo del documento alrededor de elementos flotantes.