Si que está más limpio, si... aunque se puede mejorar ;)
ahora lo que te falta es cortar el flujo de floats de las imágenes. Para hacerlo, coloca un DIV después de la última imagen y aplícale una clase que "limpie" el float tal que así:
Código:
.clear { clear:both; height:0px; font-size:0px; }
<div class="clear"> </div>
de esta forma, además, podrás quitarte de encima el height:400px porque forzarás el flujo correcto de la página.
El problema aparece cuando, al tener elementos flotados, el margen superior toma como referencia el primer elemento intentando colocar los demás alrededor del primero. De alguna forma la altura de los elementos flotados no se tiene en cuenta a no ser que cortes ese flujo.
Más didáctico no se puede ;)