Sifa ya float na mzazi bila maandishi katika CSS

Acha sasa tuwe na div yenye klas parent bila maandishi, lakini na vitalu viwili-vyatoto vyenye klas 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;
}

Результат:

Wacha tufanye vitalu-vyatoto vielee kushoto na tuone, kitakachotokea:

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

Результат:

Kama tunavyoona, vitalu-vyatoto vimejipanga kwa mstari, hata hivyo, urefu wa mzazi umepotea na vitalu vyetu vimetoka nje yake chini.

Tabia kama hii tayari tunajua. Ili kutatua shida inapaswa kutumia clearfix. Wacha tufanye hivyo:

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

Результат: