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

Métodos de restricción de flujo:

• clear: left; — prohíbe el flujo a la izquierda. Se aplica cuando el elemento no debe colocarse junto a los elementos que fluyen a la izquierda.
• clear: right; — prohíbe el flujo a la derecha. Se aplica cuando el elemento no debe colocarse junto a los elementos que fluyen a la derecha.
• clear: both; — prohíbe el flujo en ambos lados. Se aplica cuando el elemento no debe colocarse junto a ningún elemento que fluya. Esta es la opción más común.
• clear: none; (valor predeterminado) — permite el flujo.

Aplicaciones:

• Para prevenir el "colapso" del contenedor padre: Si todos los elementos hijos del padre fluyen entre sí (tienen float), el contenedor padre pierde su altura y colapsa. Agregar un elemento con clear: both; después de los elementos que fluyen dentro del padre o usar el pseudo-elemento ::after con clear: both; resuelve este problema.
• Para la colocación correcta de los elementos después de los que fluyen: Si los elementos normales (que no fluyen) deben colocarse debajo de los que fluyen y no junto a ellos.
• Para crear "filas" o "líneas" en diseños de flujo: Cuando los elementos con float deben organizarse en varias filas, se usa clear para comenzar una nueva fila.

Ejemplo de uso del pseudo-elemento ::after para limpiar:

.clearfix::after {
  content: ""; /* Importante para mostrar el pseudo-elemento */
  display: table; /* O block */
  clear: both; /* Propiedad principal para limpiar */
}

Luego, esta clase clearfix se aplica al elemento padre que contiene los elementos hijos que fluyen.