Han pasado 5 años desde el primer artículo donde describí exhaustivamente la causa y solución más común de clearfix. Y me asombra que sigan apareciendo soluciones diferentes e innovadoras a este problema que es transversal a todos los browsers. En este artículo, muestro y demuestro el más simple (pero no versátil) de los que existen en el mercado.

Dado un contenedor que contiene uno o más elementos flotando en su interior, siempre y cuando puedas definir un ancho fijo:

#container {
   width: 600px;
   display: inline-block;
}
   .floto {
      float: left;
   }

[Ver ejemplo][1]{.verejemplo}

Este método se comporta bien cuando el ancho de los elementos interiores que están flotando es menor que el del padre; las cosas comienzan a complicarse cuando aumentan:

[Ver ejemplo 2][2]{.verejemplo}

Para contrarrestarlo, define también ancho fijo en los elementos flotantes:

#container {
   width: 600px;
   display: inline-block;
}
   .floto {
      width: 280px;
      float: left;
   }

[Ver ejemplo 3][3]{.verejemplo}

Nada es perfecto… es un método más.

[1]: http://www.csslab.cl/ejemplos/displayfix/displayfix1.html “Enlace en CSSLab a “Ejemplo 1: Displayfix”” [2]: http://www.csslab.cl/ejemplos/displayfix/displayfix2.html “Enlace en CSSLab a “Ejemplo 2: Displayfix”” [3]: http://www.csslab.cl/ejemplos/displayfix/displayfix3.html “Enlace en CSSLab a “Ejemplo 3: Displayfix””