clearfix ultimate

9/jun/2008 15

Muchas han sido las veces que he nombrado y recontra-aplicado el método de .clearfix aquí en CSSLab. Lo suelo nombrar a menudo en clases, ya que es el método más fácil de entender y sobrellevar el colapso de cajas contenedoras de ventanas flotantes. Fácil porque basta con aplicar una class="clearfix" y nuestra caja vuelve a comportarse como debería. Pero es código extra que quizás ensucie nuestra hoja de estilos, y andar agregando class‘es que no tienen sentido semántico puede que no agrade a los más puristas. Pero existe desde hace mucho tiempo otra solución al mismo problema.

Ya lo mencioné de rebote en un artículo. Este método no tiene nombre conocido (por lo menos en los sitios que he leído no lo nombran de alguna manera especial). Es tan simple que dan ganas de tirarse por la ventana por no conocerlo antes.

Se trata de utilizar la propiedad CSS overflow en la caja que está colapsando. Eso es todo. Basta con incluirla en algún de los siguientes valores:

  • overflow: auto;
  • overflow: hidden;
  • overflow: scroll;

Y la caja volverá a comportarse como debiera: envolviendo a los elementos flotantes dentro de ella. La teoría es simple: como el valor por defecto es overflow: visible, esto hace que la caja crezca para adaptarse al tamaño que tienen sus elementos (etiquetas) hijo. Con visible se asume que se han dado los valores de ancho (width) y alto (height) y por eso nada sucede; ya con los demás valores ya nombrados, obliga a la caja contenedora a re-calcular sus dimensiones, tomando en cuenta ahora a los elementos hijos que están con float. Con alguno de estos valores de overflow, le recordamos a la caja contenedora que tienen elementos hijo (flotando) y que debe conocer sus tamaños para envolverlos.

El ejemplo más clásico a continuación. El HTML:

<div id="contenedor">
     <div class="flotando_izquierda">
          <p>Floto hacia la izquierda</p>
     </div>
     <div class="flotando_derecha">
          <p>Floto hacia la derecha</p>
     </div>
</div>

Y el CSS:

#contenedor {
     overflow: auto;
     height: 1%;
}
     .flotando_izquierda {
          float: left;
     }
     .flotando_derecha {
          float: right;
     }

Ver ejemplo

SafariFirefoxOperaInternet Explorer 6Internet Explorer 7

Para que IE6 reconociera este método, hubo que aplicar a la caja contenedora (en este caso #contenedor) height: 1%, haciendo que todos los browsers modernos desplieguen de igual manera este método.

El único detalle que le encontré fue al momento de utilizar dentro de #contenedor un elemento posicionado absolutamente, relativo a él, lo que hace que se muestre la barra de scroll (dado el overlow: auto;). En ese caso, lo mejor es utilizar overflow: hidden, lo que hace a la caja esconder al elemento absoluto, en el caso de éste ser más grande que la caja misma.

Ver ejemplo con absolute

Este caso es bastante específico, y creo que no hace que este método deje de ser una muy buena alternativa de despeje.

Links:

Comentarios

  1. Evelio [#]

    Graciaaaaaaaaaaaaaaasssssssssssss!!!!!!!!!!!!!!!!!!

    PD: me tire por la ventana :D

  2. fearlex [#]

    De mas decir, que este es mi sitio de CSS por preferencia, espero cada articulo con impaciencia. Y hombre, no me defraudas, esto es todo un descubrimiento. Voy a empezar a implementarlo, aunque con recelo, por que me funciona tan bien, el clearfix, que para que dejarlo, aunque me paso lo mismo con el clear: both, y al final, el clearfix, fue una solucion mas que perfecta, y limpia.

    Gracias una vez, mas, y hasta un proximo post. :D

  3. Carlos Leopoldo [#]

    Ya me tiré por la ventana pero sobreviví para preguntar… por que no se le había ocurrido antes a alguién? voy a tirarme de nuevo a ver si está vez no sobrevivo

  4. ViB [#]

    Yo no lo conocía hasta hace un tiempo atrás en que el Quiltro me lo enseñó con su Origo que está basado en este truquillo del “overflow:hidden”. Nunca más me tuve que preocupar de los divs contendores que no crecen.! Salutes

  5. Claudio Olivares [#]

    Este método fue la clave para hacer funcionar Origo CSS de manera limpia y mantener su simpleza en el marcado.

    Hace un año que ya está sometido a prueba el método en los grandes sitios de medios de COPESA, y no ha dado problema alguno, salvo las limitaciones que se pueden presentar con elementos posicionados de manera absoluta.

    Lo importante para que el clearfix ultimate (Muy buen nombre Jorge) funcione, es al menos definir una unidad de medida en la caja contenedora de los floats, funciona para tales efectos un height de 1% o un width de 100% (aconsejable este último para cuando esta caja no tiene asociados paddings)

  6. Jorge Epuñan [#]

    Claudio, gracias a tu OrigoCSS conoci esta tecnica e investigue mas sobre ella. Hice pruebas con width: 100% y lamentablemente afecta al modelo de caja (haciendo aparecer scroll donde no es necesario, por ejemplo). height: 1% fue la mejor solucion en mis pruebas y funciona en todos los browsers por igual, y por eso la inclui dentro del codigo aparte de overflow: auto. Salu2.

  7. Claudio Olivares [#]

    Al parecer, la creación de esta técnica pertenece a Paul O’brien, según se aclara en el artículo de Quirksmode.org que referencias: Clearing Floats

  8. andres [#]

    Esta tecnica la vengo usando desde hace años.

    Siempre la utilize con overflow:hidden y nunca tuve ningun tipo de problema con navegadores un poco viejitos…

    Saludos, muy buena la pag, la leo hace mucho tiempo…

  9. Coto [#]

    Shit… este comentario lo estoy escribiendo a la vuelta de haberme tirado por la ventana… afortunadamente vivo en un primer piso

  10. Javier Martinez [#]

    Estimados, creo que el overflow solo aplica al FF pero el gran IE no le hace caso. Para resolver el problema con IE me vi obligado a combinar OVERFLOW (para FF) con HEIGHT (para IE) y problema resuelto, el contenedor se extiende al tamaño de su contenido…

  11. Clearfix y su alternativa semántica | Sopa de Pixels [#]

    [...] Overflow para evitar el colapso en contenedores que envuelven elementos flotantes [...]

  12. manuedit [#]

    Al dar Outline a todo (una forma que uso para forma la pagina) aparecen los scrolls..

  13. CSSLab - Floatfix: un nuevo clearfix [#]

    [...] todos es conocido y utilizado Clearfix; luego les comenté sobre Clearfix Ultimate (bautizado por mí) y que me ha sido de gran utilidad desde entonces. Esta vez, les traigo [...]

  14. gnzlo [#]

    El overFlow:auto, funciona muy bien el tema es que al agregar el height 1% se cierra, cual es la solución?, a mi no me esta funcionando

  15. Overflow en IE6 ↝ CSSLab [#]

    [...] esta es la solución. Pero cuidado, si tienen elementos flotando, quizás algún método de clearfix a la misma caja contenedora será [...]

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab