Para entender el diseño de flotación en CSS, es útil considerar el modelo de capas de renderizado. Los elementos se organizan en capas donde los hijos se superponen a los padres según el orden de pintura. Por ejemplo, en una estructura HTML básica:
<div class="contenedor">
<div class="elemento primario">Contenido A</div>
<div class="elemento secundario">Contenido B</div>
</div>
El navegador procesa las capas secuencialmente, desde la capa base hasta las superiores. Los elementos en capas superiores pueden ocultar áreas vacías de capas inferiores. Si un contenedor tiene texto sin elementos flotantes, se renderiza primero, y luego los elementos de bloque como div ocupan el espacio restante. Los elementos de bloque sin dimensiones explícitas se ajustan automáticamente al contenido.
Cuando se aplica la propiedad float, el elemento se traslada a una capa superior exclusiva, similar a una capa con altura infinita. Los elementos flotantes se posicionan en esta capa, y los elementos subsiguientes en el flujo normal ocupan el espacio que dejaría el flotante. Sin embargo, el contenido textual no se oculta por los flotantes; en su lugar, se envuelve alrededor de ellos, como en el caso de texto rodeando una imagen.
Los elementos flotantes pueden definirse con dimensiones explícitas y comportarse como elementos en línea para alinearse entre sí. Un efecto colateral es que el conteneder padre no calcula su altura incluyendo los elementos flotantes, lo que puede causar problemas de diseño.
Considere el siguiente ejemplo CSS y HTML:
<head>
<meta charset="UTF-8">
<style>
.padre {
background-color: #f0f0f0;
border: 1px solid #333;
width: 300px;
}
.hijo-izquierdo {
background-color: #ccc;
width: 50px;
height: 50px;
}
.hijo-derecho {
background-color: #00f;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div class="padre">
<div class="hijo-izquierdo">Texto izquierdo</div>
<div class="hijo-derecho">Texto derecho</div>
</div>
</body>
En estado normal, ambos hijos se muestran verticalmente. Si se aplica flotación al hijo izquierdo:
.hijo-izquierdo {
background-color: #ccc;
width: 50px;
height: 50px;
float: left;
}
El contenido del hijo derecho puede aparecer fuera del contenedor padre o en una nueva línea. Esto se debe a que el contenedor no incluye la altura del elemento flotante. Si se incrementa el tamaño del hijo derecho:
.hijo-derecho {
background-color: #00f;
width: 60px;
height: 60px;
}
Se observa que parte del hijo derecho se superpone al flotante, pero el texto rodea el elemento flotante. La razón de que el texto no se muestre a la derecha cuando el ancho es insuficiente es que CSS respeta la integridad de las palabras; no se cortan palabras largas en espacios mínimos. Si el contenido se cambia a una cadena continua como "TextoContinuo", se mostrará a la derecha si el ancho lo permite.
Para resolver este problema, se debe limpiar la flotación. Esto hace que el navegador recalcule la altura del contenedor padre. Ejemplo con un clearfix:
<head>
<meta charset="UTF-8">
<style>
.padre {
background-color: #f0f0f0;
border: 1px solid #333;
width: 300px;
}
.hijo-izquierdo {
background-color: #ccc;
width: 50px;
height: 50px;
float: left;
}
.hijo-derecho {
background-color: #00f;
width: 50px;
height: 50px;
}
.limpiador {
clear: both;
}
</style>
</head>
<body>
<div class="padre">
<div class="hijo-izquierdo">Texto izquierdo</div>
<div class="limpiador"></div>
<div class="hijo-derecho">Texto derecho</div>
</div>
</body>
El elemento limpiador se coloca después del flotante para forzar al contenedor a incluir su altura. Si el limpiador se sitúa después de ambos hijos, el hijo derecho aún podría no mostrarse correctamente porque el cálculo de altura ocurre después del renderizado. Alternativamente, flotar ambos hijos puede funcionar, pero es mejor limpiar la flotación tras un grupo de elemetnos flotantes para evitar errores de diseño.