CSS တွင် clear property ကို အသုံးပြု၍ float ဖျောက်ခြင်း

ထိုကဲ့သို့ပြဿနာများအတွက် အထူး property တစ်ခုဖြစ်သော clear ကို အသုံးပြုနိုင်ပါသည်။ ၎င်းသည် float ကို ဖျောက်ပေးပါသည်။ left တန်ဖိုးသည် ဘယ်ဘက်မှ float ကိုဖျောက်ပေးပြီး right တန်ဖိုးသည် ညာဘက်မှ၊ နှင့် both တန်ဖိုးသည် နှစ်ဖက်စလုံးမှ float ကိုဖျောက်ပေးသည်။ ဤတန်ဖိုးကို အများဆုံးအသုံးပြုလေ့ရှိပါသည်။

ဒါကြောင့် clear property သည် float ကိုဖျောက်ပေးပါသည်။ ကျွန်ုပ်တို့၏ဥပမာတွင် ၎င်းက ပထမ div ထဲရှိ float ဖြင့်ပေါလောမျောနေသောပုံကို ဒုတိယ div အပေါ်သို့ မကျော်တက်အောင် ကာကွယ်ပေးနိုင်ပါမည်။

ထိုသို့ပြုလုပ်ရာတွင် clear ကို float element များ မကျော်တက်စေလိုသော element အား ပေးရပါမည်။ ဆိုလိုသည်မှာ ကျွန်ုပ်တို့၏ဥပမာတွင် ၎င်းကို ဒုတိယ div အား ပေးသင့်ပါသည်။

ဒီတော့ လုပ်ကြည့်ရအောင် - ဒုတိယ div အတွက် parent class အပြင် clearfix class ကိုပါ ထည့်ပေးပါမည်။ ပြီးလျှင် ထို class အသစ်အတွက် clear property ကို 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 ဟူသောအမည်သည် လူသိများသောအသုံးအနှုန်းဖြစ်သောကြောင့် နောက်ပိုင်းတွင်လည်း ထိုအမည်အတိုင်းပင် အသုံးပြုပါ။