CSS တွင် Clearfix နှင့် မိဘအမြင့်

class parent ရှိ div တစ်ခုတည်းကိုချန်ထားပြီး၊ အလင်းပေါ်နေသည့် ရုပ်ပုံကိုသာ ချန်ထားကာ ၎င်းအတွင်းရှိ စာသားကို ဖယ်ရှားပါစို့။ သင်သိပြီးသားအတိုင်း၊ ဤအခြေအနေတွင် div ၏အမြင့်သည် သုညသို့ ကျုံ့သွားပြီး၊ ၎င်းမှ ကျန်ရှိနေမည်မှာ အနီးဆုံးနှင့် အောက်ခြေနယ်နိမိတ်မျဉ်းသာဖြစ်သည်။ ရုပ်ပုံသည် ကျွန်ုပ်တို့၏ div ကို အောက်မှ ကျော်ထွက်နေလိမ့်မည်။

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

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

အလင်းပေါ်နေသည့် ရုပ်ပုံသည် ကျွန်ုပ်တို့၏ div ကို အမြင့်အားဖြင့် ချဲ့ထွင်နိုင်ရန် ပြုလုပ်ကြပါစို့။ ၎င်းအတွက် အသုံးပြုသည့် လှည့်ကွက်တစ်ခုမှာ - ရုပ်ပုံ၏နောက်တွင် class clearfix ရှိ စာသားမပါသည့် div တစ်ခုကို ထားရှိခြင်းဖြစ်သည်။

ကျွန်ုပ်တို့၏ ရုပ်ပုံသည် အလင်းပေါ်နေသည့် အစိတ်အပိုင်းဖြစ်ပြီး မိဘ၏အမြင့်ကို မချဲ့ထွင်ပေးသော်လည်း၊ div-clearfix သည် အလင်းမပေါ်သော်လည်း မိဘ၏အမြင့်အပေါ် သက်ရောက်မှုရှိသည်။

div-clearfix အား property clear သတ်မှတ်ပေးထားသောကြောင့် ၎င်းသည် ရုပ်ပုံအား အောက်သို့ တွန်းချပြီး ၎င်း၏အောက်တွင် ရပ်တည်ကာ ဤသို့ဖြင့် မိဘ၏အမြင့်ကို ချဲ့ထွင်ပေးလိမ့်မည်။

div-clearfix ကိုယ်တိုင်သည် ဗလာဖြစ်ပြီး စခရင်ပေါ်တွင် မြင်ရခြင်းမရှိသော်လည်း မိဘ၏အမြင့်ကို ချဲ့ထွင်ပေးနိုင်သည်။

ထို့ကြောင့်၊ စမ်းကြည့်ကြပါစို့။

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