Qué hace float
float empuja un elemento hacia un lado de su contenedor y deja que el texto que sigue lo rodee:
El margin de la caja con float evita que el texto la toque. Los márgenes son la forma de controlar esa separación; al texto no se le puede dar un margin hacia el float.
Los valores
| Valor | Resultado |
|---|---|
none (por defecto) | Sin float |
left | Empujado al borde izquierdo |
right | Empujado al borde derecho |
inline-start | Empujado al inicio de la línea: a la izquierda en español, a la derecha en árabe o hebreo |
inline-end | Empujado al final de la línea |
inline-start e inline-end siguen la dirección de escritura, así que un layout hecho con ellos se refleja correctamente en páginas de derecha a izquierda. Un elemento con float también se convierte en bloque: display: inline pasa a block, así que width y height se aplican incluso en un span o un img.
Imágenes con float dentro del texto
El uso clásico: una imagen dentro de un artículo, con el texto fluyendo a su alrededor. Pon una a cada lado:
clear: dejar de rodear
clear dice "empieza debajo de cualquier float anterior de este lado". Úsalo en el elemento que no debe quedar al lado de un float, como el título de la sección siguiente:
El primer título se mete al lado del float. El segundo empieza debajo. clear acepta left, right, both, inline-start, inline-end y none.
El padre que colapsa, y flow-root
Los floats están fuera del flujo normal, así que un contenedor cuyos hijos tienen todos float no tiene nada en el flujo y colapsa a altura cero. Su fondo y su borde quedan como una línea fina por encima de los floats:
display: flow-root crea un nuevo contexto de formato de bloque, que siempre envuelve a sus floats. El código antiguo usa un "clearfix" para lograr lo mismo:
.clearfix::after {
content: "";
display: block;
clear: both;
}
overflow: hidden o auto también contienen los floats, con el efecto secundario de recortar; consulta overflow.
Los floats no son para el layout
Antes de flexbox y grid, layouts de páginas enteras se construían con columnas con float, con clearfixes y cálculos de ancho por todas partes. Esa época terminó: los floats no pueden centrar, no pueden hacer columnas de la misma altura y se rompen cuando el contenido cambia de tamaño. Usa display: flex o display: grid para filas y columnas, y deja float para que el texto rodee algo. Para centrar una imagen en lugar de rodearla de texto, consulta cómo centrar una imagen.
Rodear una forma
shape-outside hace que el texto siga una forma en lugar del rectángulo del float. Solo funciona en elementos con float:
.avatar {
float: left;
width: 120px; height: 120px;
border-radius: 50%;
shape-outside: circle(50%);
margin-inline-end: 16px;
}
Errores comunes
- Un padre con altura cero. Todos sus hijos tienen float. Agrega
display: flow-root. - Floats para columnas o navegación. Usa flexbox o grid.
- Esperar
float: center. No existe. Centra con flexbox, grid omargin: 0 auto. - Contenido después de un float que lo rodea cuando no debería. Dale
clear: both, o pon el float y su texto en un contenedorflow-root. leftyrightfísicos en un sitio multilingüe. Usainline-starteinline-endpara que el layout se refleje en los idiomas de derecha a izquierda.
Preguntas frecuentes
¿Qué hace float en CSS?
Saca un elemento del flujo normal y lo empuja al borde izquierdo o derecho de su contenedor. El texto y el contenido inline que vienen después lo rodean.
¿Qué hace clear?
clear baja un elemento por debajo de los floats anteriores del lado indicado: clear: left, clear: right o clear: both. Es la forma de evitar que el contenido se acomode al lado de un float.
¿Por qué el padre de un elemento con float tiene altura cero?
Los floats están fuera del flujo normal, así que un padre que solo tiene hijos con float no tiene contenido en el flujo y colapsa. Agrega display: flow-root al padre y crecerá para contener sus floats.
¿Qué es un clearfix?
Un truco para que un padre contenga sus floats, tradicionalmente un pseudoelemento ::after con clear: both. Hoy display: flow-root en el padre hace lo mismo en una línea.
¿Debo usar float para el layout?
No. Los floats se usaban para columnas antes de que existieran flexbox y grid. Usa flexbox o grid para el layout y deja float para su trabajo original: hacer que el texto rodee una imagen o una cita destacada.
