Float omadus ja mitu plokki CSS-is

Olgu nüüd HTML koodis kõrvuti mitte üks div-tuletis, vaid kaks ja mõlemale on määratud float väärtusega left. Vaatame, mis juhtub:

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

Результат:

Niisiis, nagu näeme, asusid kaks ploki-tuletist ritta, kusjuures esimene HTML koodis olev plokk asub vasakul.

Proovime nüüd väärtuse left asemel kasutada väärtust right. Sel juhul plokid hõljuvad paremal, kusjuures nende järjekord muutub vastupidiseks võrreldes HTML koodis oleva järjekorraga:

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

Результат: