Entender como funcionan los float es complicado y se hace más dificil al momento de hacer que el sitio se vea en los navegadores. Por ejemplo, firefox es muy sensible con los floats.
Cuando existen varios elementos dentro de un div se suelen comportar de manera extraña.
En la imagen se puede ver como se comporta un float cuando esta dentro de un contenedor.
El float se ve ignorado por el contenedor y se ve colgado del borde superior. La W3C recomienda usar clear al final de la caja contenedora.
Por ejemplo, si se usa { clear: both} se extenderá el margen inferior hasta que se despeje (clear) al final del float