CSS හි ක්ලියර්ෆික්ස් සහ දෙමාපිය උස

අපි parent වර්ගයේ එක් div එකක් තබමු, පාවෙන පින්තූරය පමණක් තබමින් එයින් පෙළ ඉවත් කරමු. ඔබ දැනටමත් දන්නා පරිදි, මෙම අවස්ථාවේදී div එකේ උස ශුන්යයට ගිලී යනු ඇත, එයින් ඉතිරි වන්නේ ඉහළ සහ පහළ මායිම පමණි. පින්තූරය අපේ div එක පහළින් පිටතට යනු ඇත:

<div class="parent">
	<img src="img.png" alt="">
</div>

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

පාවෙන පින්තූරය අපගේ div එක උසින් දිගු කරන ලෙස කරමු. මේ සඳහා භාවිතා කරන්නේ හපන් උපක්‍රමයක් - පින්තූරයට පසුව div එකක් වර්ගය clearfix සමඟ (පෙළ රහිතව) තබමු.

අපගේ පින්තූරය පාවෙන මූලද්‍රව්‍යයක් වන අතර එය දෙමාපියෙකුගේ උස දිගු නොකරයි, නමුත් clearfix div - පාවෙන මූලද්‍රව්‍යයක් නොවේ සහ දෙමාපියෙකුගේ උසට බලපායි.

clearfix div වෙත clear ගුණය නියම කර ඇති බැවින්, එහි ප්‍රතිඵලය වනුයේ එය පින්තූරය මගින් පහළට තල්ලු කර එයට පහළින් සිටින අතර, මෙයින් දෙමාපියෙකුගේ උස දිගු කරනු ඇත.

clearfix div එකම හිස් වන අතර තිරයේ දෘශ්‍යමාන නොවේ, නමුත් ඒ සමඟම දෙමාපියෙකුගේ උස දිගු කරයි.

එසේ නම්, අපි උත්සාහ කරමු:

<div class="parent">
	<img src="img.png" alt="">
	<div class="clearfix"></div>
</div>

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

.clearfix {
	clear: both;
}