clearfix ultimate

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:

Sobre el Autor: Jorge Epuñan

Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.

Relacionados

Convirtiendo Listas en Árboles

Recontra conocidas ya son los menúes construídos con listas de ítems. Los hay verticales, y muy fácil es transformarlas a horizontales. Gráficamente, existen necesidades que a través de la habilidad del diseñador/desarrollador se pueden solucionar elegantemente con unos trucos de CSS. En este caso, mostraré una manera de crear menúes tipo árboles, utilizando algunos GIF [...]

Construir para Retina Display

Construir para Retina Display

Desde la salida del Retina Display, se duplicó la densidad de pixeles que utilizábamos para diseñar y construir sitios webs para iPhone. Aunque si seguías utilizando los acostumbrados 480x320px de las pantallas anteriores, se nota bastante el pixel en estos nuevos teléfonos. Pero si trabajas para la nueva resolución de 960x640px, ¿qué haces con los [...]

Flotando en la incertidumbre

Seguro uno de los temas más complicados al momento de construir un sitio tableless, se refiere a los float. Entenderlo y saber utilizarlo es un lío. Esto se complica más al momento de hacer que el sitio se vea bien en los browsers, un dolor de cabeza (Firefox es muy sensible en problemas con floats). [...]

  1. Graciaaaaaaaaaaaaaaasssssssssssss!!!!!!!!!!!!!!!!!!

    PD: me tire por la ventana :D

    Evelio
    09 / Junio / 2008

  2. 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

    fearlex
    09 / Junio / 2008

  3. 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

    Carlos Leopoldo
    10 / Junio / 2008

  4. 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

    ViB
    10 / Junio / 2008

  5. 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)

    Claudio Olivares
    10 / Junio / 2008

  6. 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

    Claudio Olivares
    10 / Junio / 2008

  7. 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…

    andres
    10 / Junio / 2008

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

    Coto
    12 / Junio / 2008

  9. 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…

    Javier Martinez
    12 / Junio / 2008

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

    manuedit
    12 / Septiembre / 2008

  11. 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

    gnzlo
    26 / Marzo / 2009

  1. [...] Overflow para evitar el colapso en contenedores que envuelven elementos flotantes [...]
    Clearfix y su alternativa semántica | Sopa de Pixels
  2. [...] todos es conocido y utilizado Clearfix; luego les comenté sobre Clearfix Ultimate (bautizado por mí) y que me ha ...
    CSSLab - Floatfix: un nuevo clearfix

OJO: si vas a agregar código fuente, asegúrate de convertirlas antes a entidades HTML, sino el comentario no se renderizará correctamente.

compartido 3 veces
Cargando