Cargando...

Float y Clear en CSS

Z-index apiló capas que se solapan. float y clear resuelven otro problema clásico: dejar que el texto abrace el lado de una imagen o un aviso y decidir cuándo el siguiente bloque debe caer debajo de esos floats. Aprende el patrón de envoltura — y deja las rejillas de página a Flexbox y Grid.

Una caja de herramientas de float y clear

📊 Float y clear de un vistazo

Herramienta Trabajo cotidiano
float: left Tira la caja a la izquierda; el contenido siguiente puede envolver a la derecha
float: right Tira la caja a la derecha; el contenido siguiente puede envolver a la izquierda
float: none Valor por defecto — sin comportamiento float
clear: left El siguiente bloque se niega a sentarse junto a floats izquierdos
clear: right El siguiente bloque se niega a sentarse junto a floats derechos
clear: both El siguiente bloque cae debajo de cualquier float a ambos lados
Clearfix El padre crece para contener hijos flotados (p. ej. overflow o display: flow-root)

Las cajas flotadas salen del flujo normal de un modo especial: los vecinos pueden envolver a su lado, y un padre puede colapsar a altura cero si solo contiene floats. Ese colapso es la razón del clearfix.

Flota una imagen, envuelve la historia

Tira una figura a la izquierda y deja que los párrafos fluyan a su lado. Dale ancho a la imagen para que el wrap se vea intencional, no accidental.

Imagen float left

css 
.article img.pull-left {
float: left;
width: 40%;
max-width: 220px;
margin: 0 1rem 0.75rem 0;
}

Flota un aviso al otro lado

Un tip o cita breve puede sentarse a la derecha mientras el cuerpo envuelve a la izquierda. Mantén márgenes para que el texto no roce la caja.

Aviso float right

css 
.tip {
float: right;
width: 38%;
margin: 0 0 1rem 1rem;
padding: 0.75rem 1rem;
background: #f5f7ff;
border-left: 3px solid #0b5fff;
}

Clear — deja de abrazar el float

Cuando un encabezado, pie o la siguiente sección debe empezar en una línea nueva debajo de los floats, usa clear. clear: both es el «cae debajo de todo lo flotado» del día a día.

Clear both tras floats

css 
.article-footer {
clear: both;
padding-top: 1rem;
border-top: 1px solid #eee;
}

Los padres colapsados necesitan clearfix

Si un padre solo envuelve hijos flotados, su altura puede colapsar y fondos/bordes se ven rotos. Arreglo tranquilo: overflow: auto (o hidden) en el padre — o el moderno display: flow-root.

Clearfix con overflow

css 
.media-row {
overflow: auto;
padding: 1rem;
border: 1px solid #e5e5e5;
}

.media-row img {
float: left;
margin-right: 1rem;
}

flow-root — un bloque contenedor claro

display: flow-root crea un nuevo contexto de formato de bloque para que el padre contenga sus floats sin pedir prestados efectos secundarios de overflow.

Clearfix con flow-root

css 
.card-with-float {
display: flow-root;
padding: 1rem;
background: #fff;
border: 1px solid #ddd;
}

Un hábito float calmado

Usa float para texto alrededor de medios y trucos pequeños de wrap. Prefiere Flexbox o Grid para navs, columnas de página y rejillas de tarjetas. Recuerda: position coloca; z-index apila; float envuelve.

Patrón medios más copia

css 
.feature {
display: flow-root;
}

.feature__media {
float: left;
width: 42%;
margin: 0 1rem 0.5rem 0;
}

.feature__copy {
/* wraps beside the media, then clears naturally as needed */
}

Pruébalo tú

  1. Flota una imagen a la izquierda en un artículo con muchos párrafos y ajusta márgenes.
  2. Flota una caja tip a la derecha y envuelve el cuerpo a su lado.
  3. Añade clear: both a un pie que subía junto a los floats.
  4. Repara un padre colapsado con overflow: auto o display: flow-root.
  5. Escribe una frase: ¿cuándo elegirías Flex en vez de float?

Errores comunes

  • Construir layouts de página enteros con float en vez de Flex/Grid
  • Olvidar clear y que los pies trepen junto a las imágenes
  • Ignorar padres colapsados alrededor de hijos flotados
  • Tratar float como position o como z-index
  • Poner clear solo en la caja flotada cuando querías el bloque siguiente

Resumen

  • float aparta una caja para que el contenido siguiente pueda envolver
  • clear obliga a los bloques posteriores a caer debajo de los floats
  • Los padres solo-floats pueden colapsar — clearfix con overflow o flow-root
  • Reserva float para patrones de wrap; usa Flex/Grid para la estructura
  • Colocación y apilado siguen en sus propias herramientas (position, z-index)

🧠 Pon a Prueba tu Conocimiento

Listo para Empezar

Pon a Prueba tu Conocimiento

Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema

❓
7
Preguntas
🎯
70%
Para Aprobar
♾️
∞
Tiempo
🔄
∞
Intentos

📝 Instrucciones

  • Lee cada pregunta cuidadosamente
  • Selecciona la mejor respuesta para cada pregunta
  • Puedes repetir el quiz tantas veces como quieras
  • Tu progreso se mostrará en la parte superior
Tema 39 de 47
Css Tutorial