explicacoin clara de las propiedades float y clear

[KnowDemon]

Hola,

Float hace "flotar" a un elemento. Cualquier elemento que tenga aplicado un float se comportará como elemento de bloque.

Float coloca, bien a la izquierda, bien a la derecha, un elemento, siempre por debajo de los elementos que lo precedan en el código si estos forman parte del "flujo" normal del documento, no estén posicionados de forma absoluta, o no sean flotantes también.

Un elemento flotante "no utiliza espacio" de su elemento padre. De tal forma que si su papa es más pequeño, el elemento flotante "saldrá" o "rebasará" los límites del elemento padre. Sin embargo, el contenido que lo rodea, sean elementos de línea o bloque sin posicionamiento absoluto, lo "esquivará" o lo "rodeará".

Clear le dice al elemento que lo posee si permite o no que un elemento flotante pueda existir a un lado o ambos lados de él.

No se puede centrar utilizando float.

Para colocar los div como solicitas debes asignar la propiedad clear: left; al div flotante de la derecha. (si no mal recuerdo).