CSS හි float ගුණය සහ බහු බ්ලොක්

දැන් HTML කේතයේ දෙවන div-දරුවෙක් එක් නොව දෙදෙනෙක් ඇතැයි සිතමු සහ දෙකටම float left අගයක් පවරා ඇත. කුමක් සිදුවේදැයි බලමු:

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

Результат:

ඉතින්, අපට පෙනෙන පරිදි, බ්ලොක් දෙක අනුපිළිවෙලට සකසා ඇත, පළමු HTML කේතයේ බ්ලොක් වමට පිහිටා ඇත.

දැන් left අගය වෙනුවට right අගය ලියමු. මෙම අවස්ථාවේදී බ්ලොක් දකුණට පාවෙනු ඇත, එහෙත් ඒවායේ අනුපිළිවෙල HTML කේතයේ ඇති අනුපිළිවෙලට වඩා ප්‍රතිවිරුද්ධ වනු ඇත:

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

Результат: