clear ගුණාංගය

clear ගුණාංගය float ගුණාංගය මගින් නිර්වචනය කරන ලද එක් අංගයක් වෙනත් අංග මගින් වැලලීම අවලංගු කරයි. එය පහත අගයන් ගත හැකිය: none (තමාගේම ක්‍රියාව අවලංගු කරයි), both (ඒකාවශ්‍යයෙන් වම් සහ දකුණු පැත්තෙන් float අවලංගු කරයි), left (වම් පැත්තෙන් float අවලංගු කරයි), right (දකුණු පැත්තෙන් float අවලංගු කරයි).

වාක්‍ය රචනා ක්‍රමය

cssතෝරන්නා {
  clear: none හෝ left හෝ right හෝ both
}

උදාහරණය

රූපය වම් පැත්තෙන් පාඨය මගින් වැලලීම අවලංගු කරමු:

html<img class="image" src="bg.png" alt="">
<div class="txt">
  <p>
    text text text text text text
    text text text text text text
    text text text text text text
    text text text text text text
  </p>
</div>

css.image {
  float: left;
  padding-right: 10px;
}
.txt {
  clear: left;
}

Результат:

උදාහරණය

දැන් රූපය දකුණු පැත්තෙන් පාඨය මගින් වැලලීම අවලංගු කරමු:

html<img class="image" src="bg.png" alt="">
<div class="txt">
  <p>
    text text text text text text
    text text text text text text
    text text text text text text
    text text text text text text
  </p>
</div>

css.image {
  float: right;
  padding-right: 10px;
}
.txt {
  clear: right;
}

Результат:

උදාහරණය

clear ගුණාංගයේම ක්‍රියාකාරිත්වය අවලංගු කරමු:

html<img class="image" src="bg.png" alt="">
<div class="txt">
  <p>
    text text text text text text
    text text text text text text
    text text text text text text
    text text text text text text
  </p>
</div>

css.image {
  float: right;
  padding-right: 10px;
}
.txt {
  clear: none;
}

Результат:

මේවාත් බලන්න