CSS Avanzado | Limpiar Floats
La principal característica de los elementos posicionados de forma flotante mediante la propiedad float es que desaparecen del flujo normal del documento.
De esta forma, es posible que algunos o todos los elementos flotantes se salgan de su elemento contenedor.
CSS Avanzado | Limpiar Floats
La siguiente imagen muestra un elemento contenedor que encierra a dos elementos de texto. Como los
elementos interiores están posicionados de forma
flotante y el elemento contenedor no dispone de más contenidos, el resultado es el siguiente:
CSS Avanzado | Limpiar Floats
Este sería el código HTML:
<div id="contenedor">
<div id="izquierda">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Duis molestie turpis vitae ante.</div>
<div id="derecha">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Nulla bibendum mi non lacus.</div>
CSS Avanzado | Limpiar Floats
Este sería el código CSS:
#izquierda { float: left; width: 40%; } #derecha { float: right; width: 40%; }
CSS Avanzado | Limpiar Floats
La solución tradicional de este problema consiste en añadir un elemento invisible, vacío, como div después de todos los elementos posicionados de forma flotante para forzar a que el elemento contenedor tenga la altura suficiente.
CSS Avanzado | Limpiar Floats
De esta manera, si añadimos un div con la propiedad clear, queda así nuestro código HTML:
<div id="contenedor">
<div id="izquierda">Lorem ipsum dolor...</div> <div id="derecha">Lorem ipsum dolor ...</div> <div style="clear: both"></div>
CSS Avanzado | Limpiar Floats
Ahora el elemento contenedor se visualiza correctamente porque encierra a todos sus elementos:
CSS Avanzado | Limpiar Floats
La técnica de corregir los problemas ocasionados por los elementos posicionados de forma flotante se suele denominar "limpiar los float".
Aunque añadir un elemento invisible corrige correctamente el problema, se trata de una solución poco elegante e incorrecta desde el punto de vista semántico. No tiene ningún sentido añadir un elemento vacío en el código HTML, sobre todo si ese elemento se utiliza exclusivamente para corregir el aspecto de los contenidos.
CSS Avanzado | Limpiar Floats
Afortunadamente, existe una solución alternativa para limpiar los float que no obliga a añadir nuevos elementos HTML y que además es elegante y muy sencilla. La solución consiste en utilizar la propiedad overflow de CSS sobre el elemento contenedor.
Si se modifica el código CSS anterior y se incluye la siguiente regla:
#contenedor {
border: thick solid #000; overflow: hidden;
CSS Avanzado | Limpiar Floats
Ahora, el contenedor encierra correctamente a los dos elementos <div> interiores y no es necesario añadir ningún elemento adicional en el código HTML. Además del valor hidden, también es posible utilizar el valor auto obteniendo el mismo resultado.
Overflow sirve en el modelado de cajas para indicar al navegador qué es lo que debe hacer con el contenido que no cabe dentro de una capa, según las dimensiones que se le han asignado.
CSS Avanzado | Limpiar Floats
Como sabemos, a las capas (elementos DIV) podemos asignarles un tamaño, en anchura y altura. Pero muchas veces el contenido que colocamos en la capa sobrepasa el espacio que hemos destinado a ella. Entonces lo que suele ocurrir es que la capa crece lo suficiente para que el contenido colocado dentro quepa. Habitualmente las capas crecen en altura, por lo que a más contenido más tamaño tendrá en altura. Este es un comportamiento que podemos alterar con el uso del atributo overflow.
CSS Avanzado | Limpiar Floats
Dicho de otro modo, overflow permite que se recorte el contenido de una capa, para mostrar únicamente el contenido que quepa, según sus dimensiones.
Para acceder al contenido que no se muestra, porque no cabe en la capa, se puede configurar overflow para que aparezcan unas barras de desplazamiento.
CSS Avanzado | Limpiar Floats
Posibles valores con el atributo overflow:
visible: Este valor indica que se debe mostrar todo el contenido de la capa, aunque no quepa en tamaño con la que la hemos configurado. En Internet Explorer ocurre que capa crece en tamaño lo suficiente para que quepa todo el contenido que hemos colocado dentro. En Firefox ocurre que la capa tiene el tamaño marcado, pero el contenido se sigue viendo, aunque fuera del espacio donde de la capa, pudiendo superponerse a un texto o imagen que hubiera debajo. El contenido no se recorta en caso alguno, es decir, siempre estará visible.
CSS Avanzado | Limpiar Floats
Posibles valores con el atributo overflow:
hidden: Este valor indica que los contenidos que, por el tamaño de la capa, no quepan en la misma, se deben recortar. Por ello, la capa tendrá siempre el tamaño configurado, pero los contenidos en ocasiones podrán no verse por completo
CSS Avanzado | Limpiar Floats
Posibles valores con el atributo overflow:
scroll: Este valor indica que la capa debe tener el tamaño que se haya configurado inicialmente y que además se deben mostrar unas barras de desplazamiento, para mover el contenido de la capa dentro del espacio de la misma. Las barras de desplazamiento siempre salen, se requieran o no.
CSS Avanzado | Limpiar Floats
Posibles valores con el atributo overflow:
auto: Con este valor también se respetarán las dimensiones asignadas a una caja. El contenido será recortado, pero aparecerán las barras de desplazamiento para moverlo. Sin embargo, en este caso las barras de desplazamiento podrán salir o no, depende de si son necesarias o no para ver todo el contenido de la capa