Cuando comienzas a diseñar interfaces web con CSS, uno de los conceptos que genera más curiosidad (y a veces dolores de cabeza) es float. Aunque hoy existen métodos más modernos como Flexbox y Grid, entender float sigue siendo clave, especialmente para mantener y entender código heredado o para resolver ciertos casos específicos de diseño.
En este artículo te explico de forma clara qué es float en CSS, cómo funciona, cuándo usarlo, y te muestro ejemplos prácticos que puedes aplicar desde ya en tus proyectos.
¿Qué es float en CSS?
El atributo float en CSS fue introducido inicialmente para que los diseñadores pudieran rodear elementos como imágenes con texto, similar a cómo funciona en un editor de texto.
Cuando se aplica float a un elemento, este se despega del flujo normal del documento y se posiciona a un lado (izquierdo o derecho), permitiendo que otros elementos fluyan a su alrededor.
Sintaxis básica:
<!-- Bloque de código eliminado por incompatibilidad -->¿Para qué sirve float?
1. Diseños de columnas simples
Antes de Flexbox y Grid, float se usaba para crear layouts de varias columnas. Por ejemplo, al colocar float: left a varios elementos con un ancho fijo, estos se alineaban horizontalmente como columnas.
<!-- Bloque de código eliminado por incompatibilidad --><!-- Bloque de código eliminado por incompatibilidad -->Resultado:
2. Textos que rodean imágenes
Es uno de los usos más comunes y aún muy válido hoy:
<!-- Bloque de código eliminado por incompatibilidad -->Resultado:
Problemas comunes con float
Uno de los principales problemas con float es que los elementos flotados salen del flujo normal del documento, y los elementos contenedores pueden colapsar (es decir, no ajustarse a la altura de los elementos internos).
¿La solución? Usar clearfix:
<!-- Bloque de código eliminado por incompatibilidad -->Y en tu HTML:
<!-- Bloque de código eliminado por incompatibilidad -->¿Debería seguir usando float?
Hoy en día, float no debería usarse para crear layouts principales, ya que Flexbox y CSS Grid ofrecen soluciones mucho más potentes, flexibles y fáciles de mantener.
Sin embargo, aún es válido para situaciones pequeñas o específicas, como alinear una imagen o contenido corto dentro de una sección.
float es una herramienta clásica de CSS que ha sido fundamental en el desarrollo web. Aunque ha sido superada por tecnologías más modernas, sigue siendo importante conocer cómo funciona, ya sea para mantener código legado o para resolver tareas específicas con eficiencia.