CSS 05: Float y Clear

1. Float Left Básico

El elemento sale del flujo normal y se pega al borde izquierdo de su contenedor. El texto fluye a su derecha.

.box { float: left; }

2. Float Right Básico

El elemento se pega al borde derecho. El texto fluye a su izquierda.

.box { float: right; }

3. Texto Rodeando Imagen (Izq)

El uso clásico: una imagen alineada a la izquierda con texto rodeándola.

Este es un párrafo de texto que rodea a la imagen. La propiedad float fue diseñada originalmente para esto, imitando el diseño de periódicos y revistas donde las imágenes se integran con el texto de manera fluida.

img { float: left; margin-right: 10px; }

4. Texto Rodeando Imagen (Der)

Lo mismo, pero alineando la imagen a la derecha.

Aquí la imagen flota a la derecha. Es importante añadir un margen (margin-left en este caso) para que el texto no se pegue completamente a la imagen y sea legible.

img { float: right; margin-left: 10px; }

5. Elementos de Bloque en Línea

Convertir elementos de bloque (como divs) para que se comporten como elementos en línea, uno al lado del otro.

div { float: left; }

6. Orden Visual vs DOM (Right)

Al flotar a la derecha, el primer elemento en el HTML se pega más a la derecha. El orden visual se invierte.

.todos { float: right; }

7. Split Layout (Izq/Der)

Un elemento a la izquierda y otro a la derecha en la misma línea.

.uno { float: left; } .dos { float: right; }

8. El Problema del Colapso

Si un padre solo tiene hijos flotantes, su altura colapsa a 0. El borde rojo debería envolver a los hijos.

.padre { /* Sin altura definida */ }

9. Solución 1: Elemento Vacío

Añadir un div vacío con clear: both al final del contenedor.

<div style="clear: both;"></div>

10. Solución 2: Overflow Hidden

El truco de overflow: hidden (o auto) fuerza al padre a calcular su altura (BFC).

.padre { overflow: hidden; }

11. Solución 3: Clearfix (La Mejor)

Usar un pseudo-elemento ::after para limpiar los flotantes sin añadir HTML extra.

.clearfix::after {

  content: "";

  display: table;

  clear: both;

  

}

12. Clear Left

El cuadro verde tiene clear: left, por lo que baja debajo del flotante izquierdo (rojo), ignorando el espacio libre.

.verde { clear: left; }

13. Clear Right

El cuadro verde tiene clear: right. Si hubiera un flotante a su derecha antes, bajaría. Aquí forzamos un ejemplo con float right.

.verde { clear: right; }

14. Clear Both

Asegura que el elemento baje debajo de CUALQUIER flotante (izquierda o derecha).

.verde { clear: both; }

15. Layout 2 Columnas

Creando dos columnas de ancho igual (o diferente) con márgenes.

.col { width: 48%; float: left; margin: 1%; }

16. Layout 3 Columnas

Tres columnas flotando a la izquierda.

.col { width: 31.33%; float: left; }

17. Galería de Imágenes (Grid)

Múltiples elementos flotantes crean una grilla natural. Si no caben, bajan.

.item { float: left; width: 100px; margin: 5px; }

18. Menú de Navegación Horizontal

Usar float en los <li> para hacer un menú horizontal.

li { float: left; }

19. Letra Capital (Drop Cap)

Flotar la primera letra de un párrafo para un efecto editorial.

.letra { float: left; font-size: 3em; }

20. Float Drop (El error común)

Si el ancho total (ancho + padding + margin) supera el 100% del padre, la última columna "cae".

El contenedor mide 200px. Las cajas miden 150px. No caben dos juntas.