CSS float y clear

Las propiedades float y clear pertenecen a técnicas antiguas de CSS para alinear elementos uno al lado del otro. Aunque hoy Flexbox y Grid son más comunes, float sigue siendo útil, especialmente para ajustar texto alrededor de imágenes.

Cómo funcionan float y clear

Float permite colocar un elemento a la izquierda o derecha del contenedor, mientras el resto del contenido fluye alrededor. Clear asegura que un nuevo elemento no se sitúe junto a un float, sino debajo.

Propiedad	Descripción
float: left \| right	El elemento flota a la izquierda o derecha, el contenido lo rodea.
clear: left \| right \| both	Evita que un elemento se coloque junto a un float.

Ejemplo de float y clear

En este ejemplo, un elemento flota a la izquierda y otro a la derecha, luego clear asegura que el siguiente contenido empiece debajo.

Con clear: both, la caja verde se coloca debajo de los dos elementos flotantes.

Consejos para usar float y clear

Float y clear pueden ser útiles en diseños simples, pero en proyectos modernos es mejor usar Flexbox o Grid.

Float es ideal principalmente para rodear imágenes con texto.
Usa siempre clear o clearfix para mantener el layout estable.
No intentes crear layouts completos solo con float, ya que son difíciles de mantener y poco flexibles.