Plantilla CSS: float: left;

📝 Uso previsto

Esta plantilla se utiliza cuando deseas alinear elementos uno al lado del otro utilizando el método clásico float: left;. Es útil para compatibilidad con navegadores antiguos o cuando no se puede usar Flexbox.

📘 Explicación

Al aplicar float: left; y establecer un ancho a cada elemento, se crea una estructura en línea. Se usa la clase .clearfix en el contenedor para conservar la altura del mismo.

✅ Demostración

Caja 1

Caja 2

Caja 3

📄 Código (fragmento)

<style>
  .float-box {
    float: left;
    width: 30%;
    margin-right: 5%;
    padding: 1rem;
    background: #f9f9f9;
    border: 1px solid #ccc;
    text-align: center;
  }
  .float-box:last-child {
    margin-right: 0;
  }
  .clearfix::after {
    content: "";
    display: block;
    clear: both;
  }
</style>

<div class="clearfix">
  <div class="float-box">Caja 1</div>
  <div class="float-box">Caja 2</div>
  <div class="float-box">Caja 3</div>
</div>

📦 Código (HTML completo)

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Demostración float: left</title>
  <style>
    .float-box {
      float: left;
      width: 30%;
      margin-right: 5%;
      padding: 1rem;
      background: #f9f9f9;
      border: 1px solid #ccc;
      text-align: center;
    }
    .float-box:last-child {
      margin-right: 0;
    }
    .clearfix::after {
      content: "";
      display: block;
      clear: both;
    }
  </style>
</head>
<body>
  <div class="clearfix">
    <div class="float-box">Caja 1</div>
    <div class="float-box">Caja 2</div>
    <div class="float-box">Caja 3</div>
  </div>
</body>
</html>

¡Copiado!

📐 Técnicas prácticas para el uso de diseños con float

float: left es una propiedad clásica pero aún relevante en CSS. Aunque Flexbox y Grid son ahora los métodos predominantes, float sigue siendo esencial para construir diseños en entornos más antiguos o heredados.

🔄 Funcionamiento básico de float

Los elementos con float se salen del flujo normal del documento y se alinean al borde izquierdo o derecho del contenedor padre. Es fundamental especificar un valor de width y aplicar clearfix al contenedor padre para que su altura se calcule correctamente.

⚠️ Problemas comunes y soluciones

Cuando los elementos flotantes tienen diferentes alturas, pueden producirse desbordamientos o solapamientos no deseados. Para evitarlo, se puede aplicar overflow: hidden a cada elemento flotante o combinar float con display: inline-block.

🛠️ Ejemplos prácticos de uso

Es ideal para diseños donde el texto rodea una imagen (wrap text) o para crear maquetaciones complejas al estilo de revistas o periódicos. Combinado con la propiedad shape-outside, se pueden lograr diseños avanzados con envoltura de texto en formas circulares o poligonales.

Float también puede adaptarse a diseños responsivos, pero se debe tener cuidado en pantallas móviles, por ejemplo, usando float: none dentro de media queries. En el desarrollo web moderno, se recomienda priorizar el uso de Flexbox o Grid y reservar float para casos específicos.