Aporte: Guía de Migración a XHTML+CSS - Parte II

[Caminantejm]

Buenas.
Estoy en esta tarea de la Migración y ciertamente sigue siendo dura a veces. Pero gracias de nuevo a la gente que estáis ayudando.
+ ¿Contradicciones en el funcionamiento de los float?
Esta cuestión parece fácil a simple vista.
1.- Expongo este estilo:

Código CSS:

div#pagina {
  border: 1px solid #CCC;
  background-color: salmon;
  padding: 10px;
}
 
.derecha {border: 1px solid crimson; 
width: 100px; 
height: 140px;
  float: right;
}
 
.izquierda {border: 1px solid saddlebrown; 
width: 100px; 
height: 140px;
  float: left;
}
 
div.clear {
  clear: both;
}
 

En este código.

Código HTML:

<div id="pagina"> 
    
    <div class="izquierda">Izquierda</div>
    
  <span style="background:aqua;">
  Y si yo escribo algo, ¿dónde se guardaría esto? Veámoslo. Lo que no se es si continuaría hasta el final o no. Para comprobarlo intentaré
  generar una línea gigante que tenga que sobrepasar el ancho razonable. Y si yo escribo algo, ¿dónde se guardaría esto? Veámoslo. Lo que no se es si continuaría hasta el final o no. Para comprobarlo intentaré
  generar una línea gigante que tenga que sobrepasar el ancho razonable. Y si yo escribo algo, ¿dónde se guardaría esto? Veámoslo. Lo que no se es si continuaría hasta el final o no. Para comprobarlo intentaré
  generar una línea gigante que tenga que sobrepasar el ancho razonable. Y si yo escribo algo, ¿dónde se guardaría esto? Veámoslo. Lo que no se es si continuaría hasta el final o no. Para comprobarlo intentaré
  generar una línea gigante que tenga que sobrepasar el ancho razonable.</span>
  
    <div class="derecha">Derecha</div>
  
  Texto anterior al clear.
  <div class="clear"></div>Texto posterior al clear.
</div>
 

Resultado (Opera, Mozilla e IE):



---> En teoría, he leído en las recomendaciones de W3C "Un elemento flotante a la izquierda debe ser colocado lo más a la izquierda posible, y un elemento flotante a la derecha lo más a la derecha posible. Tiene preferencia una posición más alta que una que esté más a la izquierda/derecha".
Pues bien, aquí no se cumple.
---> Luego no parece tan estricto que se salgan del flujo los float. Se salen parcialmente y se van a la parte que encuentran más alta. Si hay un "p" que les impide o un "span" como en este caso no salen totalmente del flujo.


---> Sin embargo, si coloco en el HTML la izquierda y derecha juntas sí se cumple. Yo siempre he entendido que los float se salen del flujo y se van a la parte más alta. Pero aquí veo claramente que no. ¿Me falta algún detalle?

Código HTML:

<div id="pagina"> 
    <div class="derecha">Derecha</div>
    <div class="izquierda">Izquierda</div>
    
  <span style="background:aqua;">
  Y si yo escribo algo, ¿dónde se guardaría esto? Veámoslo. Lo que no se es si continuaría hasta el final o no. Para comprobarlo intentaré
  generar una línea gigante que tenga que sobrepasar el ancho razonable. Y si yo escribo algo, ¿dónde se guardaría esto? Veámoslo. Lo que no se es si continuaría hasta el final o no. Para comprobarlo intentaré
  generar una línea gigante que tenga que sobrepasar el ancho razonable. Y si yo escribo algo, ¿dónde se guardaría esto? Veámoslo. Lo que no se es si continuaría hasta el final o no. Para comprobarlo intentaré
  generar una línea gigante que tenga que sobrepasar el ancho razonable. Y si yo escribo algo, ¿dónde se guardaría esto? Veámoslo. Lo que no se es si continuaría hasta el final o no. Para comprobarlo intentaré
  generar una línea gigante que tenga que sobrepasar el ancho razonable.</span>
  
  Texto anterior al clear.
  <div class="clear"></div>Texto posterior al clear.
</div>
 

Resultado ahora.


-------> 2.- Y una pregunta para Mikmoro si puede contestar. Le estaría muy agradecido. En la primera de la guía (Migración...) parte presentas un ejemplo de layout en dos columnas laterales (derecha e izquierda). El centro es líquido. ¿Por qué colocar primero en el HTML primero la derecha, luego la izquierda y posteriormente la central? ¿Hay algún motivo especial? Parece que la lógica dice primero va en el código la que te encuentras antes -izquierda-, después la central y al final la derecha.

Espero alguien me confirme esto.
Gracias de antemano.
Caminantejm.