Propiedad float y múltiples bloques en CSS
Supongamos que ahora en el código HTML hay no uno,
sino dos div hijos y a ambos se les aplica float
con el valor left. Veamos qué pasa:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
some long text
</div>
.parent {
border: 1px solid red;
text-align: justify;
}
.child {
float: left;
width: 200px;
height: 100px;
border: 1px solid green;
}
:
Entonces, como podemos ver, los dos bloques hijos se alinearon en una fila, y el primer bloque en el código HTML se ubicará a la izquierda.
Ahora, en lugar del valor left,
escribamos el valor right. En este caso,
los bloques flotarán a la derecha, y su orden
cambiará al inverso en comparación con el
orden en el código HTML:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
some long text
</div>
.parent {
border: 1px solid red;
text-align: justify;
}
.child {
float: right;
width: 200px;
height: 100px;
border: 1px solid green;
}
:
