overflow
Esta propiedad es esencial para controlar lo que sucede cuando el contenido de un elemento es demasiado grande para caber dentro del espacio definido para ese elemento.
- visible: El contenido se saldrá de los bordes, pero por encima de estos (se verá la par del contenido que quede fuera del elemento).
- hidden: El contenido se saldrá pero por debajo del borde y no será visible la parte que se salga.
- scroll: Se insertan 2 barras de scroll para cuando el contenido sea demasiado grande (desaconsejado porque aparecerán las barras aunque el contenido se ajuste bien).
- auto: Más aconsejable que la de arriba. Aunque esta opción hace que dependa del navegador, normalmente este añadirá una o las 2 barras de scroll al elemento conforme se necesiten (dependiendo de por donde se salga el contenido).
<div class="caja visible">
Este texto es muy largo y debería salirse de la caja. ¡Mira cómo sigue fluyendo por fuera de los límites definidos! Esto es útil cuando no te importa que el contenido exceda los límites visuales de la caja.
</div>Propiedades específicas al eje
También se pueden controlar el desbordamiento por separado para el eje X y vertical Y
- overflow-x: controla el desbordamiento horizontal
- overflow-y: controla el desbordamiento vertical.
/* Si solo quieres una barra de desplazamiento vertical, podrías usar: */
.caja-vertical {
width: 200px;
height: 100px;
overflow-x: hidden; /* Oculta cualquier desbordamiento horizontal */
overflow-y: auto; /* Añade scroll vertical si es necesario */
}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