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:
Ver originaldiv#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:
Ver original
<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.
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:
Ver original <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.
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.
pero me alegro de que te guste. Lo hago encantado. A ver si me meto con la tercera parte alguna vez.
Este tema le ha gustado a 14 personas