¿Cómo funcionan los elementos flotantes (floats) en…

Los elementos flotantes (floats) en CSS se sacan del flujo normal del documento y se desplazan en la dirección especificada (hacia la izquierda o hacia la derecha) dentro de su contenedor. Los elementos adyacentes en línea y el contenido comienzan a rodear al elemento flotante desde el lado opuesto.

Propiedades principales de float:

left: El elemento se desplaza a la izquierda.
right: El elemento se desplaza a la derecha.
none: El elemento permanece en el flujo normal (valor predeterminado).
inherit: Hereda el valor del elemento padre.

Se usaron comúnmente para crear diseños de varias columnas antes de la aparición de Flexbox y Grid.

Características de comportamiento:

El elemento flotante se vuelve de bloque, independientemente del tipo de visualización original.
La altura del contenedor padre no considera la altura del elemento flotante, lo que puede causar que el contenedor colapse. Para solucionar esto, se utilizan métodos de limpieza (clearing).

Métodos de limpieza (clearing):

Propiedad clear: Se aplica a un elemento para evitar que sea rodeado por elementos flotantes. Valores: left, right, both, none, inherit.
```
/* El elemento no rodeará a los elementos flotantes por ambos lados */
.clear-both {
  clear: both;
}
```
Reseteo del flujo (técnica clearfix): Añadir un pseudo-elemento :after al contenedor padre con clear: both y otros estilos para evitar el colapso.
```
/* clearfix clásico */
.clearfix::after {
  content: "";
  display: table; /* o "block" */
  clear: both;
}
```

A pesar de la aparición de métodos de diseño más modernos, float todavía puede ser útil para elementos pequeños, por ejemplo, para colocar una imagen dentro del texto.

¿Cómo funcionan los elementos flotantes (floats) en CSS?