clear ගුණාංගය

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

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

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

උදාහරණය

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

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

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

උදාහරණය

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

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

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

උදාහරණය

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

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

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

මේවාත් බලන්න

bottom ගුණාංගය,
අංගයේ පහළ ඉර කෙළවරේ ස්ථානය නියම කරයි
top ගුණාංගය,
අංගයේ ඉහළ ඉර කෙළවරේ ස්ථානය නියම කරයි
left ගුණාංගය,
අංගයේ වම් ඉර කෙළවරේ ස්ථානය නියම කරයි
right ගුණාංගය,
අංගයේ දකුණු ඉර කෙළවරේ ස්ථානය නියම කරයි
::backdrop සුළු අංගය,
පළමු අංගයට පසුව ස්ථානගත කිරීම නියම කරයි
caption-side ගුණාංගය,
වගුවේ ශීර්ෂකයේ ස්ථානය නියම කරයි