Entender como funcionan los float es complicado y se hace más difícil al momento de hacer que el sitio web se vea en los navegadores. Por ejemplo, firefox es muy sensible con los floats.

La mayoría de estructuras de los proyectos web complejos están diseñados con el posicionamiento flotante (float)

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 la propiedad 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

La propiedad clear permite modificar el comportamiento por defecto del posicionamiento flotante para forzar a un elemento a mostrarse debajo de cualquier caja flotante. La regla CSS que se aplica al segundo párrafo del ejemplo anterior es la siguiente:

  
...