Proprietatea float și mai multe blocuri în CSS

Să presupunem că acum în codul HTML nu există un singur div-descendent, ci două și amândurora le este setat float cu valoarea left. Să vedem ce se va întâmpla:

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;
}

Результат:

Așadar, după cum putem vedea, cele două blocuri-descendent s-au aliniat pe un rând, iar primul bloc din codul HTML va fi poziționat în stânga.

Să încercăm acum în loc de valoarea left să scriem valoarea right. În acest caz blocurile vor pluti în dreapta, iar ordinea lor se va schimba în ordine inversă comparativ cu ordinea din codul 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;
}

Результат: