El problema aquí, es que el float, funciona exactamente igual que funcionaba el align="left" con las imagenes. Te sigue poniendo las cosas alrededor del elemento alineado hasta que se acaba el elemento en cuestión o cortas. En html lo hacíamos con el <br clear=left|right|all>. Con cSS lo hacemos con la propiedad clear, para decirle al elemento que no "flote" al rededor del elemento alineado, sino que se coloque en el primer espacio libre que encuentre después del elemento, a la izquierda, a la derecha o del todo.
En tu ejemplo, si fuerzas al tercer div a colocarse a la izquierda después del elemento se coloca debajo:
Código:
#3 {
clear: left;}
<div id="3">nuevo</div>
Según mi teoría, si pusiéramos clear: all; también debería colocarse debajo, pero no lo hace, ahí si que ya no sé por qué, también yo estoy aprendiendo
