/* Para FF, Opera, etc. */
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* Para IE 5.x, 6, 7 */
<!--[if IE]>
<style>   
    .clearfix {display: inline-block;}          
    /* Hides from IE-mac \*/
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    /* End hide from IE-mac */
</style>
<![endif]-->

Hacer que un contenedor que contiene floats los abarque enteros, es decir, que realmente los contenga.

Bastaría con aplicar la clase .clearfix al contenedor

Cleared elements

CSS