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:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  some long text
</div>

css.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:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  some long text
</div>

css.parent {
  border: 1px solid red;
  text-align: justify;
}
.child {
  float: right;
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

Результат: