CSS clearfix

O problema acontece quando um elemento flutuante está dentro de outro elemento, que não força a sua altura automaticamente para ajusatr ao elemento flutuante. Quando um elemento usa a propriedade "float", seu pai não consegue calcular a altura pois com o float o elemento sai do escopo. Você pode usar 2 métodos para arrumar isto:

• {clear: both;}
• clearfix

.clearfix:after {
   content: ".";
   display: block;
   clear: both;
   visibility: hidden;
   line-height: 0;
   height: 0;
}
 
.clearfix {
   display: inline-block;
}
 
html[xmlns] .clearfix {
   display: block;
}
 
* html .clearfix {
   height: 1%;
}

Sem clearfix

Com clearfix

Fonte: http://www.webtoolkit.info/css-clearfix.html