¿Cómo funciona float: left; en CSS?


float: left; es una propiedad que "saca" un elemento del flujo normal del documento y lo desplaza hacia la izquierda, permitiendo que el contenido (como texto) fluya a su alrededor.

Concepto básico

Imagina que tienes una imagen en un periódico y el texto rodea la imagen. ¡Eso es exactamente lo que hace float!

Comportamiento principal:

  1. El elemento flota a la izquierda - Se desplaza lo más a la izquierda posible dentro de su contenedor

  2. El contenido siguiente fluye alrededor - El texto y elementos inline lo rodean por la derecha

  3. El elemento sale del flujo normal - Los elementos de bloque se comportan como si el float no existiera

Ejemplo visual:

html
<div style="border: 1px solid black; padding: 10px;">
    <img src="imagen.jpg" style="float: left; width: 100px; height: 100px; margin-right: 10px;">
    <p>Este texto va a fluir alrededor de la imagen que está flotando a la izquierda. 
       Observa cómo el texto rodea la imagen por el lado derecho.</p>
</div>

Ejemplo práctico con cajas:

css
.caja {
    float: left;
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: lightblue;
}
html
<div class="caja">Caja 1</div>
<div class="caja">Caja 2</div>
<div class="caja">Caja 3</div>
<p>Este texto comienza después de las cajas flotantes.</p>

Resultado visual:

text
[Caja 1] [Caja 2] [Caja 3]  
Este texto fluye... pero como las cajas flotan, 
el texto podría comenzar a la derecha de la última caja

Problema común: el colapso del contenedor

Cuando todos los elementos hijos flotan, el contenedor padre "colapsa" (altura 0):

html
<div style="border: 2px solid red;">  ← Este contenedor no se ve bien
    <div style="float: left;">Flotante 1</div>
    <div style="float: left;">Flotante 2</div>
</div>

Solución: "Clearfix"

css
.contenedor {
    overflow: hidden;  /* Solución 1 */
    /* o */
    display: flow-root; /* Solución 2 moderna */
}

/* o el clásico clearfix */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

Usos comunes:

1. Galerías de imágenes:

css
.imagen {
    float: left;
    width: 200px;
    margin: 10px;
}

2. Diseños de columnas (antes de Flexbox/Grid):

css
.columna {
    float: left;
    width: 33.33%;
}

3. Text wrapping con imágenes:

css
.articulo img {
    float: left;
    margin-right: 15px;
    margin-bottom: 10px;
}

La propiedad clear

Para "romper" el flujo de los floats, usamos clear:

css
.clear {
    clear: both;  /* También puede ser left o right */
}
html
<div style="float: left;">Flotante</div>
<div style="float: left;">Otro flotante</div>
<div style="clear: both;">Este elemento ya no flota, empieza debajo</div>

Ejemplo completo:

html
<style>
    .float-box {
        float: left;
        width: 150px;
        height: 150px;
        background-color: #4CAF50;
        color: white;
        margin: 10px;
        text-align: center;
        line-height: 150px;
    }
    
    .clearfix::after {
        content: "";
        clear: both;
        display: table;
    }
    
    .texto {
        background-color: #f1f1f1;
        padding: 10px;
    }
</style>

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

<div class="texto">
    Este texto comienza después de las cajas flotantes gracias al clearfix.
</div>

Nota importante:

Hoy en día, Flexbox y Grid son más recomendados para diseños complejos, pero float sigue siendo útil para:

  • Que el texto rodee imágenes

  • Mantener compatibilidad con navegadores antiguos

  • Diseños simples donde Flexbox/Grid sería "excesivo"

Explicación del código paso a paso

Este código crea un menú de navegación horizontal típico. Te explico cada parte:

1. Estructura HTML

html
<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#about">About</a></li>
    </ul>
</nav>

  • <nav>: Etiqueta semántica para navegación

  • <ul>: Lista no ordenada (los items del menú)

  • <li>: Cada item de la lista

  • <a>: Enlaces clickables

2. Estilos del body

css
body {
  margin: 0;
  padding: 0;
}

  • Elimina los márgenes y paddings por defecto del body

  • Hace que el menú quede pegado a los bordes de la página

3. Estilos de la lista (<ul>)

css
ul {
  list-style-type: none;    /* Quita los puntos de la lista */
  margin: 0;                /* Quita márgenes por defecto */
  padding: 0;               /* Quita paddings por defecto */
  overflow: hidden;         /* ¡IMPORTANTE! Contiene los elementos flotantes */
  background-color: #333333; /* Fondo gris oscuro para el menú */
}

¿Por qué overflow: hidden; aquí?

Como los <li> tienen float: left, salen del flujo normal y el <ul> colapsaría (altura 0).
overflow: hidden hace que el <ul> "reconozca" la altura de sus hijos flotantes y se expanda para contenerlos.

4. Estilos de los items (<li>)

css
ul li {
  float: left;    /* Hace que los items se alineen horizontalmente */
}

¿Qué hace float: left; aquí?

  • Normalmente los <li> son elementos de bloque y se apilan verticalmente

  • float: left los "saca" del flujo normal y los coloca uno al lado del otro

  • Así logramos un menú horizontal

5. Estilos de los enlaces (<a>)

css
ul li a {
  display: block;           /* Convierte el enlace en bloque */
  color: white;             /* Texto blanco */
  text-align: center;       /* Texto centrado */
  padding: 14px 16px;       /* Espaciado interno */
  text-decoration: none;    /* Quita el subrayado */
}

¿Por qué display: block; en los enlaces?

  • Por defecto los <a> son elementos inline

  • Al ponerlos como block, todo el área del enlace se vuelve clickable

  • Además, respetan el padding correctamente

  • Así, si pasas el mouse sobre el fondo gris, funciona como enlace

6. Efecto hover

css
ul li a:hover {
  background-color: #111111;  /* Fondo más oscuro al pasar el mouse */
}

Visualización del proceso:

Sin estilos:

text
• Home
• News
• Contact
• About

Con list-style-type: none y sin float:

text
Home
News
Contact
About

Con float: left en los <li>:

text
Home  News  Contact  About  (horizontal)

Con display: block en los <a>:

text
[  Home  ][  News  ][ Contact ][ About  ] ← Toda el área es clickable

Resumen de las propiedades que preguntaste:

PropiedadFunción en este código
display: block;Hace que los enlaces ocupen todo el espacio del <li>
list-style-type: none;Elimina los puntos de la lista
overflow: hidden;Evita que el <ul> colapse por los floats
float: left;Coloca los items en horizontal

Resultado final:

Un menú horizontal con fondo gris oscuro, texto blanco, y los items cambian a gris más oscuro al pasar el mouse. 🎯

Comentarios

Publicar un comentario

Entradas más populares de este blog

Tutorial de CSS: De Cero a Estilizar tu Primera Página Web

1. ¿Qué es CSS? CSS son las siglas de  Cascading Style Sheets  (Hojas de Estilo en Cascada). Es un lenguaje que usamos para describir la  presentación  de un documento escrito en HTML. Mientras que HTML se encarga de la estructura y el contenido (títulos, párrafos, imágenes), CSS se encarga de cómo se ve ese contenido (colores, fuentes, tamaños, posición). 2. ¿Cómo se integra CSS con HTML? Hay tres formas principales de incluir CSS en tu proyecto: CSS en línea (Inline):  Se aplica directamente a una etiqueta HTML usando el atributo  style . Es el método menos recomendado porque mezcla contenido con presentación y es difícil de mantener. html < p style = " color : blue ; font-size : 18px ; " > Este es un párrafo azul. </ p > CSS interno (Internal):  Se escribe dentro de la etiqueta  <style>  en la sección  <head>  del documento HTML. Es útil para páginas individuales o para hacer pruebas rápidas. html <...
Leer más

layouts

   "Explica el siguiente código HTML y CSS poniendo especial énfasis en: La maquetación de cajas : cómo se estructuran visualmente cada uno de los elementos (body, tarjeta, imagen, textos, botón). El flujo natural de las cajas : cómo se comportan los elementos en el flujo por defecto (elementos de bloque vs. en línea) y cómo se van posicionando unos respecto a otros. La agrupación de elementos : cómo se relacionan visualmente los elementos que están dentro de un mismo contenedor. La jerarquía padre-hijo : cómo afectan las propiedades del elemento padre a sus hijos directos e indirectos (herencia, contención, y cómo el espacio del padre condiciona el espacio de los hijos). f Tutorial: Creando una Plantilla de Registro HTML/CSS Objetivo del Proyecto Vamos a crear la estructura básica de una página web que contiene: Un menú de navegación con 4 opciones. Un formulario de registro de usuario. Estilos CSS para que todo se vea ordenado y profesional. Paso 1: Entendiendo la Estructura...
Leer más

Proyecto Práctico: Tarjeta de Perfil

"Explica el siguiente código HTML y CSS poniendo especial énfasis en: La maquetación de cajas : cómo se estructuran visualmente cada uno de los elementos (body, tarjeta, imagen, textos, botón). El flujo natural de las cajas : cómo se comportan los elementos en el flujo por defecto (elementos de bloque vs. en línea) y cómo se van posicionando unos respecto a otros. La agrupación de elementos : cómo se relacionan visualmente los elementos que están dentro de un mismo contenedor. La jerarquía padre-hijo : cómo afectan las propiedades del elemento padre a sus hijos directos e indirectos (herencia, contención, y cómo el espacio del padre condiciona el espacio de los hijos).    Creando una Tarjeta de Perfil con HTML y CSS Descripción del Proyecto Vamos a crear una tarjeta de perfil profesional que contiene: Foto de perfil circular Nombre de la persona Descripción breve Ubicación Botón interactivo con efectos Al final, tendremos una tarjeta moderna y responsive que se centra en la pa...
Leer más