CSS-de float häsiýeti we birnäçe blog

Indi HTML kodunda iki div-çaga bolsun we olaryň ikisine hem float häsiýeti berilen, onuň bahasy left. Näme boljakdygyna göz aýlalyň:

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

Результат:

Şeýlelik bilen, görşümiz ýaly, iki çaga-blog bir hatarda düzüldi, we HTML kodunda birinji bolan blog çep tarapda ýerleşer.

Indi left bahasynyň ýerine right bahasyny ýazalyň. Bu ýagdaýda bloglar sag tarapda üýşer, we olaryň tertibi HTML kodundaky tertibe garanyňda tersine çalyşar:

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

Результат: