En este artículo vamos a explicar la propiedad overflow de CSS y cómo puede ayudarnos con el desbordamiento y los elementos flotantes. Uno de los desafíos más comunes al manejar contenidos HTML es su tratamiento cuando desborda los límites de su contenedor. CSS y su propiedad overflow nos permite controlar cómo se muestra el contenido HTML que excede el tamaño de su contenedor.
¿Qué es la propiedad overflow de CSS?
La propiedad overflow en CSS determina cómo se manejará el contenido que desborda los límites de su contenedor. Esta propiedad puede tener varios valores que controlan la forma en que se mostrará el contenido desbordado: visible, hidden, scroll y auto.
A parte de la propiedad overflow, podemos especificar en cual de los ejes (x, y) queremos que se apliquen las propiedades con overflox-x, overflow-y, todos aceptan los mismo valores.
visible
Este es el valor predeterminado de la propiedad overflow. Cuando se establece en visible, el contenido que desborda el contenedor se mostrará fuera de él, sin recortarse o ocultarse. Esto significa que el contenido puede sobresalir del contenedor, afectando potencialmente la disposición de otros elementos en la página.
.container {
overflow: visible;
}hidden
Cuando se establece en hidden, el contenido que desborda el contenedor se recorta y se oculta, es decir, no será visible para el usuario. Este valor es útil cuando se desea ocultar contenido que se extiende más allá de los límites del contenedor.
.container {
overflow: hidden;
}scroll
Con el valor scroll, se agregan barras de desplazamiento al contenedor, permitiendo al usuario desplazarse horizontal y verticalmente para ver el contenido que se extiende más allá de los límites del contenedor.
.container {
overflow: scroll;
}auto
El valor auto es similar a scroll, ya que también agrega barras de desplazamiento al contenedor si el contenido desborda sus límites. Sin embargo, las barras de desplazamiento solo se mostrarán cuando sea necesario, es decir, solo si hay contenido desbordado.
.container {
overflow: auto;
}Hasta aquí hemos visto los usos comunes de la propiedad overflow y cómo podemos mostrar, recortar, ocultar o añadir barras de desplazamiento al «exceso» de contenido. Sin embargo hay un uso extremadamente útil de la propiedad overflow que se utiliza junto a los elementos flotados.
Propiedad overflow con elementos flotados
Hemos visto que la propiedad overflow trabaja con el «flujo» natural de los contenidos a medida que el navegador los coloca en la página web. Sin embargo, también puede afectar al diseño y la visualización de elementos flotados dentro del contenedor. Veamos un ejemplo típico SIN utilizar overflow:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
width: 50%;
margin: auto;
text-align: center;
}
.container {
/* overflow: hidden; */
border: 2px solid black;
background-color: lightblue;
}
.col1 {
width: 50%;
float: left;
background-color: green;
}
.col2 {
width: 50%;
float: right;
background-color: orange;
}
</style>
</head>
<body>
<h1>Contenedor con elementos flotados</h1>
<div class="container">
<div class="col1">
<h2>Columna 1</h2>
<p>Una linea</p>
</div>
<div class="col2">
<h2>Columna 1</h2>
<p>Una linea</p>
<p>Dos lineas</p>
<p>Tres lineas</p>
</div>
</div>
</body>
</html>Este código debería mostrar dos columnas (verde y naranja) dentro de un contenedor con fondo azul claro y rodeado con un borde negro. Sin embargo al ejecutar el código obtenemos una página web como la siguiente imagen:
Los elementos flotados «escapan» del flujo natural del contenido y el contenedor al estar «vacío» solo ocupa el espacio de su borde negro. Para solucionar este problema ahora añadimos la propiedad overflow: hidden al contenedor y veremos que su comportamiento cambia casi por arte de magia obteniendo el siguiente resultado:
Ahora sí se muestra el contenedor y abarca la totalidad de los elementos flotados. Vamos a explicar qué está ocurriendo y la diferencia entre ambas imágenes.
- Cuando un contenedor contiene elementos flotados, éstos son retirados del flujo normal del documento y pueden superponerse al contenido dentro del contenedor.
- Esto es un efecto secundario común del uso de elementos flotados llamado colapso de altura del contenedor. Ocurre porque un contenedor no expande su altura para incluir los elementos flotados dentro de él.
- Al aplicar
overflow: hidden, el contenedor fuerza su altura para incluir los elementos flotados, evitando así el colapso de altura. Al intentar ocultar cualquier contenido que se desborda del contenedor, incluidos los elementos flotados aunque estén fuera del flujo, estamos «engañando» al contenedor con su contenido.
Resumen de la propiedad overflow de CSS
La propiedad overflow en CSS es una herramienta muy útil para controlar cómo se muestra el contenido que desborda los límites de su contenedor. Al comprender los valores disponibles y su comportamiento, podemos diseñar interfaces de usuario más efectivas y mejorar la experiencia del usuario en nuestro sitio web.
También nos permite utilizar diseños de columnas flotadas con diferentes alturas dentro de un mismo contenedor y utilizando un mismo fondo, agrupando datos. Puedes seguir experimentando con estos ejemplos y descubrir nuevas formas de diseñar tus páginas web.
¡ Espero que este artículo sea de vuestro interés !