clearfix
Clearfix usando overflow
Cuando usamos overflow en un contenedor es una de las formas más sencillas de solucionar el típico problema al tener elementos flotantes (float).
Cuando tienes un elemento contenedor (un div, por ejemplo) y dentro de él colocas otros elementos a los que les aplicas la propiedad float (por ejemplo, float: left;), el contenedor "colapsa". Esto significa que el contenedor no se expande para rodear a sus hijos flotantes y, en la práctica, actúa como si estuviera vacío, perdiendo su altura. Ejemplo:
<div class="contenedor-problema">
<div class="caja-flotante">Flotante 1</div>
<div class="caja-flotante">Flotante 2</div>
</div>El resultado sería que el borde gris del .contenedor-problema aparecería como una línea en la parte superior, sin rodear a las cajas azules, porque su altura sería cero.
Para solucionar este colapso, puedes aplicar una de las siguientes propiedades overflow al elemento contenedor:
- overflow: auto;
- overflow: hidden;
Al aplicar overflow con un valor distinto de visible (el valor por defecto) al contenedor, se crea lo que se conoce como un nuevo contexto de formato de bloque (Block Formatting Context o BFC).
Un BFC es como un mini-layout dentro de la página. Cuando un elemento crea un nuevo BFC, una de sus reglas es que debe contener a todos sus descendientes, incluidos los elementos flotantes. Por lo tanto, el contenedor se ve forzado a expandirse para rodear completamente a los elementos flotantes que tiene dentro, solucionando el problema del colapso de altura. Ejemplo de solución:
<div class="contenedor-solucionado">
<div class="caja-flotante">Flotante 1</div>
<div class="caja-flotante">Flotante 2</div>
</div>Ahora, el div con el borde gris se expandirá correctamente y contendrá las dos cajas azules flotantes.
Ventajas y desventajas
- Ventaja principal: Es una solución muy simple y limpia. Solo necesitas añadir una línea de CSS al contenedor.
- Posible desventaja: Usar overflow: hidden; puede cortar contenido que se desborde del contenedor (como sombras o menús desplegables). overflow: auto; es generalmente más seguro, ya que solo mostrará barras de desplazamiento si el contenido realmente se desborda, lo cual es raro en este caso de uso.
Hoy en día se usan más técnicas modernas como Flexbox o Grid para el layout, que no sufren de este problema