Etiqueta para limpiar flujo en CSS: Clear vs Overflow

A raíz de un post en dmstk sobre programación cliente pruebo formas para limpiar el flujo que sean más semánticas que la inclusión de capas vacías, saltos de línea u otros elementos para limpiar correctamente el flujo.

El problema

Cuando trabajamos con diseños de página basados en contenedores flotados, mediante la propiedad float, nos encontramos con el problema del div contenedor, éste no se hace tan alto como los div hijos, por lo que éstos no tienen el mismo background que su contenedor principal. Lo vemos claramente cuando queremos poner un borde para poner dentro dos div hijos.

Lo vemos en el siguiente ejemplo.

Lo que nosotros queremos es la capa superior contenedor rodee a sus dos hijas. Esto no ocurre porque no tiene una altura definida y como sólo contiene elementos flotados muestra su altura como 0px.

Para Microsoft Explorer basta con asignar un ancho a la capa contenedora para que sí nos muestre el borde alrededor las dos capas interiores.

Solución mediante HTML

Nuestro objetivo es hacer que esto funcione para todos los navegadores.

Hasta ahora conocía una solución que era la de incluir un elemento extra para poder «limpiar» el flujo. Un elemento con el famoso clear: both.

Esta solución es válida pero contraria a la filosofía del diseño de páginas web mediante estándares, porque utilizamos un elemento de contenido para presentación.

Para no perder esta filosofía podíamos introducir la nueva clase en otro elemento que fuese más correcto como un salto de línea o una línea de separación.

Esto tiene que ser así mientras Internet Explorer no acepte la seudo clase after.

Otra solución

Alex Walker nos ofrecía otra solución más simple mediante la utilización de la propiedad overflow.

Esta propiedad controla que el contenido de un div no desborde al div contenedor.

Asignando el valor auto a la propiedad overflow, el contenedor se hará tan alto como el de su contenido, para que esta propiedad funcione correctamente en Internet Explorer debemos asignar un ancho al contenedor.

La propiedad overflow

Puede tener 4 valores: visible, hidden, scroll y auto.

El valor que toma por defecto es visible, scroll mostrará las barras de scroll para la capa contenedora siempre, auto sólo las mostrará en el caso en que el contenido sea mayor que un ancho o alto especificado en la contenedora, y hidden ocultará las barras de scroll siempre.

Algunos navegadores como Internet Explorer necesitarán que especifiquemos un ancho o un alto, tal y como lo hemos puesto en el ejemplo.

Para el Explorer Mac debemos utilizar el valor hidden, así no mostrará las barras de scroll.

Referencias

Este método no es ni nuevo, ni mío, pero he considerado interesante dejarlo por escrito aquí, así espero que os sirva. Las referencias donde encontrareis más, y mejor, información son estas.

Publicado mas o menos el 22 de marzo de 2006 a las 3:45 pm por César García Gascón, archivado en las categorías CSS y etiquetado cómo , . Siéntete libre de comentar un poco más abajo si quieres.

5 comentarios

Muy bien explicado, llevabamos un tiempo buscando una solución y habíamos encontrado varias pero todas utlizando elementos innecesarios.
Gracias

Estupenda la solución del overflow para elementos flotantes que forman una fila. El problema surge cuando tenemos un listado a varias columnas y no queremos utilizar un elemento contenedor para cada fila. Intentaré explicarme mejor: un caso sería un cuyos flotan para poder formar un listado a dos-tres(las que sean) columnas y varias filas.

Ok cuando podemos controlar la altura de todos los elementos, pero cuando ésta puede variar tenemos un problema. Si alguno de los primeros elementos de la fila 1 es más alto, los de la siguiente fila es como si se atascasen con él, de manera que el primer elemento de la fila 2, no se ubica en la primera posición de la fila, si no allí donde se ha ‘chocado’ con el elemento de la fila anterior que era más alto.

La única solución que he encontrado es incluir un que haga un clear después del último elemento de cada fila… pero me parece un poco chapuza tener que meter un elemento vacío o algo así como | display:none para controlar la presentación…

¿Conocéis alguna solución?

Deja una respuesta

Este sitio usa cookies que me ayudan a saber de dónde vienen las cuatro visitas que tengo, lo que hacen y cuánto tiempo pasan aquí. mandangas legales

La mandanga legal de las cookies Hay una ley, la Ley 34/2002 nos obliga a avisarte de que usamos de terceros (básicamente de Google) con el único objetivo de medirte a ti y a los cuatro más que me visitan, esto sólo te va a salir una vez si lo aceptas y si no pero continúas navegando, asumo que todo guay. Si no te parece bien me dejarás sólo con cuatro visitas este mes pero oye qué no te preocupes que que nadie te obliga a entrar aquí.

Al lío