Muchas han sido las veces que [he nombrado][1] y [recontra-aplicado][2] 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][3]. 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"><br />
     <div class="flotando_izquierda"><br />
          <p>Floto hacia la izquierda</p><br />
     </div><br />
     <div class="flotando_derecha"><br />
          <p>Floto hacia la derecha</p><br />
     </div><br />
</div>

Y el CSS:

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

[Ver ejemplo][4]{.verejemplo}

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][5], 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][6]{.verejemplo}

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

[1]: http://www.csslab.cl/2006/07/20/flotando-en-la-incertidumbre/ “Enlace en CSSLab a “Flotando en la incertidumbre”” [2]: http://www.csslab.cl/2007/03/09/clearfix-el-widget/ “Enlace en CSSLab a “.clearfix: el widget”” [3]: http://www.csslab.cl/2008/01/28/review-1-origo-css/ “Enlace en CSSLab a “Review 1: Origo CSS”” [4]: http://www.csslab.cl/ejemplos/clearfix_ultimate/overflow.html “Ver enlace a ejemplo “Clearfix Ultimate”” [5]: http://www.csslab.cl/2007/05/11/absolutamente-si/ “Enlace en CSSLab a " Absolutamente sí”" [6]: http://www.csslab.cl/ejemplos/clearfix_ultimate/overflow_absolute.html “Ver enlace a ejemplo “Clearfix Ultimate con Absolute””