CSS'te float Özelliği ve Birden Fazla Blok

Şimdi HTML kodunda yan yana bir değil, iki tane div-alt öğesi olduğunu ve her ikisine de float özelliğinin left değeriyle atandığını varsayalım. Bakalım ne olacak:

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

Результат:

Yani, gördüğümüz gibi, iki alt blok yan yana sıralandı, ve HTML kodundaki ilk blok solda konumlanacak.

Şimdi left değeri yerine right değerini yazalım. Bu durumda bloklar sağda konumlanacak ve HTML kodundaki sıralamalarının tersi bir düzende olacaklar:

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

Результат: