CSS හි clear ගුණය භාවිතයෙන් ඇලවීම අවලංගු කිරීම

මෙවැනි ගැටලුවක් විසඳීම සඳහා විශේෂ clear ගුණයක් පවතින අතර එය ඇලවීම අවලංගු කරයි. left අගය වම් පසින් ඇලවීම අවලංගු කරයි, right අගය - දකුණු පසින්, සහ both අගය - දෙපසින්ම. මෙම අගයම බහුලවම භාවිතා වේ.

එබැවින්, clear ගුණය ඇලවීම අවලංගු කරයි. අපගේ අවස්ථාවේදී, මෙමගින් පළමු div හි ඇති ඉඟිරිගිය රූපය දෙවන div මතට නොගොස් සිටීමට අපට හැකි වේ.

මේ සමඟ, clear ලබා දිය යුත්තේ එම අංගයට වන අතර, එහි මතට ඉඟිරිගිය අංග නොගොස් සිටිය යුතුය, එනම් අපගේ අවස්ථාවේදී එය දෙවන div සඳහා ලබා දිය යුතුය.

අපි මෙය කරමු - දෙවන div ට parent පන්තියට අමතරව clearfix පන්තියද ලබා දී මෙම නව පන්තිය සඳහා clear ගුණය both අගයෙන් අර්ථ දක්වන්නෙමු - රූපයේ නගා සිටීම අතුරුදහන් වේ:

<div class="parent">
	<img src="img.png" alt="">
	පාඨය
</div>
<div class="parent clearfix">
	පාඨය
</div>

.parent {
	border: 1px solid red;
}
.parent img {
	float: left;
}

.clearfix {
	clear: both;
}

clearfix යන නම පොදුවේ පිළිගත් එකකි, එබැවින් අනාගතයේදී එයම භාවිතා කරන්න.