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

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

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

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