Alguno sabe ingles? How To Clear Floats Without Structural Markup

[jesusbet]

está algo largo para traducirlo ahora, pero lo único que tienes que tomar en cuenta es el siguiente código:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

En pocas palabras, este truquito te soluciona un problema con los elementos flotados. La cosa está así: tu elemento padre debería crecer mientras crezcan sus elementos hijos, sin embargo, cuando flotas un elemento, al elemento padre ya no le importa y entonces toma la medida más grande de los elementos no flotados. El truco del clearfix hace que el elemento padre crezca de acuerdo al elemento más grande, sin importarle si están flotados o no.

Anteriormente yo solucionaba esto con un div de 1px, sin embargo, con este truco tan solo hace falta agregar la clase al contenedor padre.

Saludos