claro: a la derecha también lo hace claro: ¿a la izquierda? Extraño comportamiento flotante

Parece clear: right causas clear: right también son clear: left para todas las carrozas consecutivas! Ver http://jsfiddle.net/Mx7zu/11/ o este código:

    div { margin: 16px; width: 200px; height: 130px; border: solid red 1px; } #right1 { float: right; } #right2 { float: right; clear: right; } #left1, #left2 { float: left; }    
Right 1
Right 2
Left 1
Left 2

¡Esperaría que los divs left1 y left2 estuvieran en la parte superior, en el mismo nivel que right1! Esto solo ocurre cuando coloco el div con clear: right (right2) como el último:

 
Right 1
Left 1
Left 2
Right 2

¿Puedes explicar este extraño comportamiento? ¡Gracias por adelantado! Probado en FF 9.0.1.

Piense en el navegador como, por defecto, exponiendo la página de izquierda a derecha y de arriba a abajo.

Inicialmente, el punto de inicio para el contenido está en la parte superior, lado izquierdo.

The float:right of #right1 shrink ajusta el div y lo mueve hacia el lado derecho. El espacio a la izquierda está disponible para otro contenido.

The float:right of #right2 shrink envuelve el div e intenta #right2 hacia el lado derecho también. Pero el clear:right impide que vaya junto al div #right1 . Por lo tanto, el punto de partida para el contenido que se colocará se #right2 hacia abajo hasta que el div #right2 se pueda colocar con éxito. Luego se coloca a la derecha.

El #left1 div se coloca entonces. El float:left shrink ajusta el div e intenta #right2 en el punto de partida para el contenido que ahora está directamente a la izquierda de #right2 . Como el espacio a la izquierda de #right2 es lo suficientemente grande como para contener #left1 , ahí es donde se coloca #left1 .

De forma similar, el espacio a la izquierda de #right2 y a la derecha de #left1 es lo suficientemente grande para acomodar #left2 , ahí es donde se ubica #left2 .