Para cualquiera que tenga que trabajar diariamente escribiéndo código xHTML/CSS, es muy importante conocer cómo se comportan los elementos flotantes, sus limitaciones y las diferencias entre distintos navegadores. Por eso hoy les traigo esta traducción del artículo de Eric Meyer “Containing Floats” que habla sobre los elementos flotantes que escapan a sus contenedores.

Contenedores flotantes

Si bien los elementos flotantes pueden ser muy útiles y poderosos, también pueden crearnos más de una complicación. Es muy posible que te haya ocurrido una situación similar a la “Figura 1″, algo que se nos presenta comunmente cuando tenemos elementos “div”, con imágenes en su interior.

Seguramente esto no es lo que teníamos pensado, no es el resultado que esperábamos, pero por lo que vemos, es el resultado que obtenemos. Estas son las reglas CSS usadas en la figura:

Esto es todo lo que se necesita. El resultado lo vemos en la Figura 1, que ocurre porque el elemento “div” no se estira para contener a la imágen flotant que se encuentra en su interior. Si vemos la situación desde otro punto de vista, esto pasa porque las imágenes flotantes se”escapan” por la parte inferior de los elementos “div”.

Esto no es un error, y tampoco es una falla en el CSS. Pero obviamente, lo que se ve en la Figura 1 no es lo que esperábamos obtener.

Entendiendo el problema

Entonces, ¿en qué momento, a nombre de todo de todo lo que es bueno y correcto, querrían los autores que sus elementos flotantes se escaparan de sus contenedores? Simple: en el caso históricamente más común para el uso de elementos flotantes. Mirá la “Figura 2″ y la estructura básica que la produjo.

La habilidad de conseguir que el texto fluya alrededor de una imagen es algo que existe hace mucho mucho tiempo. Comenzó a existir en la web a partir de Netscape 1.1, y es por eso que CSS también lo hace posible, utilizando la propiedad “float”. Pero si miramos de cerca la “Figura 2″, vemos que la imagen flotante escapa de su elemento contenedor. Lo podemos ver más claramente si agregamos bordes a los párrafos, como se muestra en la Figura 3.

Entonces, ahora podemos ver lo importante que es que los elementos flotantes se escapen de sus contenedores. De no ser así, entonces la Figura 2 se hubiera visto como la Figura 4.

Claro que eso no se ve muy bien. Por lo tanto, con el fin de mantener la tradición con el diseño web y lo que el autor del código espera, el CSS es escrito para permitir a los elementos flotantes escaparse de la punta inferior de sus contenedores. Mientras esto nos viene muy bien para hacer fluir un texto, es un gran problema cuando los elementos flotantes se utilizan para propósitos de diseño.

Una solución “limpia”

Si vamos a usar elementos flotantes para la creación de diseños tableless, hay una forma de estirar los contenedores alrededor de estos elementos. Para esto vamos a necesitar un poco de “hack” estructural. Como queremos que el contendor se estire hasta estar por debajo del elemento flotado, podemos decir que la propiedad “clear” es nuestra respuesta. Entonces, sólo basta con insertar un elemento de bloque justo antes del final del contenedor. Teniendo en cuenta lo siguiente:

Ahora, si aplicamos las siguientes propiedades al elemento que insertamos, obtendremos el resultado que se muestra en la Figura 5.

Al asegurarnos de que los elementos “hr” sean bloques, sean parte del flujo normal, y “limpien” en la misma dirreción de la imagen flotante, vemos que forzamos a los “div” a estirarse alrededor de la imagen flotante.

Los márgenes negativos (tanto el superior como el inferior) tienen el efecto general de cierre, es decir, damos a “hr” una altura “invisible”. Sin embargo, este efecto no es preciso, y no se comporta de manera idéntica en todos los browsers. La naturaleza semi-misteriosa de las reglas horizontales hace difícil predecir exactamente qué va a pasar. La altura efectiva del “hr” puede ser cero, una pequeña cantidad positiva, o incluso hasta una altura negativa.

Como es costumbre, eso depende del browser que estemos utilizando.

Por lo tanto, en situaciones en las que se precisa un efecto de “limpieza”, podemos optar por utilizar un “div” en lugar de un “hr” para crear dicho efecto de “limpieza”.

Por ejemplo:

Un elemento flotante para arreglar otro elemento flotante.

Hay una forma de evitar el abuso de los hacks estructurales discutidos hasta ahora, aunque en determinadas ocasiones siguen siendo necesarios. En la mayoría de los navegadores, y como se definió en CSS2.1, un elemento flotado se expandirá para contener cualquier elemento flotante que desciendan de él. Entonces en nuestro ingenioso ejemplo, podemos remover todos los elementos de “limpieza” y en vez de eso escribir estas reglas:

Nótese flotamos las 2 imágenes y también a los div “item”. Ajustando el “width” de los div, de modo que sean más que grandes que el 50%, asegurándonos de que nunca estarán uno al lado del otro y apilándose verticalmente. Con esto se obtiene el resultado mostrado en la Figura 6.

Obviamente que esto es más simple de manejar, tanto en términos xhtml como en términos de estilos. Pero si necesitamos por ejemplo insertar un texto debajo del listado de items, para evitar que el texto sea afectado por los elementos flotantes, vamos a necesitar un hack estructural. Esto nos lleva a un código cómo el siguiente, ilustrado en la Figura 7.

El elemento que usamos para limpiar los floats, empuja el flujo normal hacia abajo, forzando a cualquier contenido siguiente, por ejemplo el párrafo con el texto, a fluir después de este elemento “clear”, y por lo tanto después de los “div” flotantes.
El problema potencial de usar elementos flotantes dentro de otros elementos flotantes, es que se debe confiar en que todos los browsers interpreten consistentemente la disposición de los múltiples elementos flotantes añadidos. Esta situación se vuelve más frágil cuando los elementos flotantes son parte de un diseño más complejo, en donde se usan elementos flotantes, elementos con posicionamiento relativo y/o absoluto, o un diseño con tablas. Esto no sifnifica que sean diseños imposibles de alcanzar, sino que para lograrlos hace falta mucho trabajo de prueba y error para evitar elementos flotantes perdidos y otros bugs de disposición de elementos que pueden presentarse en los motores de renderizado.

Conclusión

Una vez que entendemos cómo los elementos flotantes y el flujo normal se relacionan, y entendiendo como la “limpieza de floats” puede usarse para manipular el flujo normal alrededor de los elementos flotantes, quiénes escribimos código podemos emplear los elementos flotantes como una herramienta de diseño muy poderosa. Como los floats no fueron pensados originalmente para ser utilizados en el “layout”, o sea la disposición de los elementos que conforman el diseño de la página, se requieren algunos hacks estructurales para obtener el resultado esperado. Esto implica el uso de elementos flotantes que contienen a otros elementos flotantes, o elementos de “limpieza” o “clear”, sin decartar en algunos casos la combinación de ambos.

Autor: Eric Meyer
Traducción: Santiago Escalante
Revisión: Emilio Mariscal

Esta entrada fue publicada el Lunes, 2 de Marzo de 2009 a las 9:10 0937 y está clasificada bajo: General. Puede hacer un seguimiento de los comentarios de esta entrada gracias al feed RSS 2.0. Puede dejar un comentario, o enviar un trackback desde su sitio.