inquiettudes & The blog
Etiqueta para limpiar flujo en CSS: Clear vs Overflow
CSS
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.
Posts relacionados
No hay ningún post relacionado con el que acabas de leer, pero quizás te interesa seguir un ratito más en mi blog o saber un poco más de mí.
¿seguimos en contacto?
Zafonic lo dijo hace 5 años
Muy bien explicado, llevabamos un tiempo buscando una solución y habÃamos encontrado varias pero todas utlizando elementos innecesarios.
Gracias
Estela lo dijo hace 5 años
¡Estupendo! Llevo dÃas intentando encontrar algo asÃ.
Susana lo dijo hace 5 años
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?
inquiettudes lo dijo hace 5 años
Susana,
¿puedes poner el enlace de la página donde te ocurre eso?
asà podriamos ver el código e intentar solucionar el problema que teneis.
Federico Meson » Marqueteando una Web lo dijo hace 5 años
[...] b) Utilizacion de clear/overflow: link [...]
emotionally unavailable men lo dijo hace 5 años
I’m not too confident if I exactly see you eye to eye with you on this. Couldn’t there be alternative way to look at it?
{6} comentarios
Estos son los comentarios para Etiqueta para limpiar flujo en CSS: Clear vs Overflow, ¿quieres dejar un comentario? ¿a qué esperas?