Float savybė ir keli blokai CSS

Tarkime, kad šalia HTML kode yra ne vienas div-palikuonis, o du ir abiems nustatyta float reikšmė left. Pažiūrėkime, kas bus:

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

Результат:

Taigi, kaip matome, du blokai-palikuonys išsirikiavo į eilę, ir pirmasis HTML kode esantis blokas bus į kairę.

Dabar vietoj reikšmės left parašykime reikšmę right. Šiuo atveju blokai plūduriuos dešinėje, ir jų tvarka pasikeis atvirkščiai, palyginti su tvarka HTML kode:

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

Результат: