CSS float īpašība un vairāki bloki

Tagad pieņemsim, ka HTML kodā blakus atrodas neviens div-pēctecis, bet divi un abiem ir iestatīts float ar vērtību left. Apskatīsim, kas notiks:

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

Результат:

Tātad, kā mēs redzam, divi bloku-pēcteči sarindojās pēc kārtas, un pirmais bloks HTML kodā atradīsies pa kreisi.

Tagad vērtības left vietā ierakstīsim vērtību right. Šajā gadījumā bloki peldēsies pa labi, un to secība mainīsies uz pretējo, salīdzinot ar to secību HTML kodā:

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

Результат: