CSS හි පා text රහිත මව් අංගයක float ගුණය

දැන් අප සතුව parent පන්තියෙන් යුත් div එකක් ඇතැයි සිතමු, පා text රහිත වුවත්, 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;
}

Результат:

දරු බහා අංග වමට පාවෙන ලෙස කර බලමු කුමක් සිදුවේදැයි:

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

Результат:

අපට පෙනෙන පරිදි, දරු බහා අංග පේළියකට සකස් වූ නමුත්, මව් අංගයේ උස අතුරුදහන් වී අපගේ අංග එයින් පහලට විහිදී ඇත.

මෙම හැසිරීම අපට දැනටමත් ප්‍රසිද්ධය. ගැටළුව විසඳීම සඳහා clearfix භාවිතා කළ යුතුය. අපි එය කරමු:

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

Результат: