Хосияти float ва волидайн бе матн дар CSS

Бигзор ҳоло мо див бо синфи parent бе матн, аммо бо ду блок-фарзанд бо синфи child дорем:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
</div>

css.parent {
  width: 500px;
  border: 1px solid red;
  text-align: justify;
}
.child {
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Биёед блок-фарзандҳоро шиноваршаванда (float) аз тарафи чап созем ва бинем, ки чӣ рӯй медиҳад:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
</div>

css.parent {
  width: 500px;
  border: 1px solid red;
  text-align: justify;
}
.child {
  float: left;
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

Результат:

Чун ки мебинем, блок-фарзандҳо дар як қатор истоданд, вале, баландии волидайн нобуд шуд ва блокҳои мо аз он берун ба поён рафтанд.

Ин рафтор аллакай ба мо маълум аст. Барои ҳалли машкулот бояд аз клиарфикс истифода кард. Биёед ин корро анҷом диҳем:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="clearfix"></div>
</div>

css.parent {
  width: 500px;
  border: 1px solid red;
  text-align: justify;
}
.child {
  float: left;
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

.clearfix {
  clear: both;
}

Результат: