Layout con float en CSS

Aunque hoy en día Flexbox y CSS Grid son las herramientas preferidas para crear diseños responsivos, float sigue siendo una técnica útil y, a veces, la única disponible en entornos legacy. En este artículo desglosamos su funcionamiento, mostramos ejemplos reales y ofrecemos buenas prácticas para evitar los problemas típicos asociados.

¿Qué es float?

La propiedad float permite que un elemento se desplace hacia la izquierda (left) o derecha (right) del contenedor, haciendo que el contenido que sigue fluya alrededor de él, como ocurre con las imágenes en los artículos de prensa.

Sintaxis básica

.float-left {
  float: left;   /* o right */
  margin: 0 1rem 1rem 0; /* espacio alrededor */
}

Ejemplo clásico: Sidebar y contenido principal

En este ejemplo reproducimos una estructura de dos columnas donde el sidebar flota a la izquierda y el contenido principal ocupa el resto del ancho.

<div class="wrapper">
  <aside class="sidebar">Sidebar</aside>
  <section class="main">Contenido principal</section>
</div>

.wrapper {
  overflow: hidden; /* clearfix rápido */
}
.sidebar {
  width: 250px;
  float: left;
  background:#f8f9fa;
  padding:1rem;
}
.main {
  margin-left: 260px; /* ancho del sidebar + margen */
  padding:1rem;
}

El overflow:hidden en el contenedor actúa como un clearfix sencillo, evitando que el contenedor colapse.

Ejemplo avanzado: Galería de imágenes con float

Crear una cuadrícula fluida sin Flexbox ni Grid todavía es posible usando float. Cada imagen flota a la izquierda y se controla el ancho mediante calc() para que siempre haya tres columnas.

<div class="gallery">
  <img src="img1.jpg" alt="" class="thumb">
  <img src="img2.jpg" alt="" class="thumb">
  <img src="img3.jpg" alt="" class="thumb">
  <!-- más imágenes -->
</div>

.gallery {
  margin: -0.5rem;
  font-size: 0; /* elimina espacios en línea */
}
.thumb {
  width: calc(33.333% - 1rem);
  margin: 0.5rem;
  float: left;
  display: block;
  border: 1px solid #dee2e6;
}
/* clearfix robusto */
.gallery::after {
  content: "";
  display: table;
  clear: both;
}

Comparativa: float vs Flexbox vs CSS Grid

Compatibilidad y rendimiento

La propiedad float está soportada por todos los navegadores modernos y legacy, desde IE6 en adelante. En términos de rendimiento, float es extremadamente ligero porque no requiere cálculos de distribución complejos como Flexbox o Grid. Sin embargo, su uso indebido puede generar reflows costosos al mover elementos en el flujo del documento.

Problemas comunes y técnicas de troubleshooting

• Contenedor colapsado: aplicar clearfix (p. ej., .clearfix::after {content:"";display:table;clear:both;}) o usar overflow:auto/hidden.
• Superposición de columnas: asegurarse de que la suma de anchos + márgenes no exceda el ancho del contenedor.
• Altura inesperada: los elementos flotados no influyen en la altura del padre; usar min-height o display:flex en el contenedor si se necesita que el padre se expanda.
• Orden inesperado en móviles: float no permite reordenar visualmente sin cambiar el HTML. En dispositivos estrechos, considera clear: both y width:100% dentro de una media query.

Buenas prácticas y optimización

1. Utiliza float sólo para diseños simples (sidebar, galerías, imágenes dentro de texto).
2. Aplica siempre un clearfix al contenedor que agrupa elementos flotados.
3. Define anchos con unidades relativas (%, calc()) para mantener la responsividad.
4. Evita combinar float con position:absolute a menos que sea estrictamente necesario.
5. Revisa la accesibilidad: los lectores de pantalla siguen el orden del DOM, por lo que el contenido debe estar estructurado lógicamente.
6. Para proyectos nuevos, prefiere Flexbox o Grid; reserva float para compatibilidad con navegadores muy antiguos o para casos donde el rendimiento sea crítico.

Conclusión

El layout con float sigue siendo una herramienta valiosa en el arsenal del desarrollador web, sobre todo cuando se necesita soportar entornos legacy o maximizar el rendimiento en dispositivos de bajo consumo. Con una comprensión clara de su comportamiento y la aplicación de técnicas como clearfix, overflow y anchos fluidos, es posible crear diseños robustos y responsivos. No obstante, para proyectos modernos se recomienda migrar a Flexbox o CSS Grid, que ofrecen mayor flexibilidad y menos trampas.