Soy césar, aka @inquiettudes, diseñador de interacción freelance trabajando para mejorar la experiencia de usuario de la realción de las personas y los objetos. Puedes saber un poco más de mi en facebook, twitter y linkedin. Me encanta el diseño de interacción, la construcción de sitios web y las redes sociales. Pero lo que realmente me motiva es la solución de problemas y las relaciones entre los usuarios. De la manera mas sencilla. Así de fácil.

Usabilidad, diseño centrado en el usuario, arquitectura de la información & servicios diseño de interacción

El blog de inquiettudes

Etiqueta para limpiar flujo en CSS: Clear vs Overflow

Ya hay 5 comentarios

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.

Publicado hace mas o menos 11 años por @inquiettudes.

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 hace mas o menos 11 años por @inquiettudes en las categorías CSS.

Etiquetado cómo , . Si quieres estar al dí de lo que pasa en el post suscríbete a los comentarios.

Ya hay 5 comentarios

Estos son los comentarios para Etiqueta para limpiar flujo en CSS: Clear vs Overflow, ¿quieres dejar un comentario? ¿a qué esperas?

Zafonic lo dijo hace mas o menos 11 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 mas o menos 11 años

¡Estupendo! Llevo días intentando encontrar algo así.

Susana lo dijo hace mas o menos 11 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 mas o menos 11 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 mas o menos 9 años

[...] b) Utilizacion de clear/overflow: link [...]

¿Tienes algo que decir?

Deja tu comentario seguro que es muy interesante. Por favor guarda la temática del post para mantener un debate agradable. No uses este formulario como SPAM. Añade tu comentario a continuación, tambié puedes crear un trackback desde tu sitio. Suscríbete a los comentarios de este post.

Mi último tweet

cosas que están pasado durante este 2016

Hecho con mucho cariño entre ciudad real y madrid