CSS ရှိ float ဂုဏ်သတ္တိအား မိတ်ဆက်ခြင်း

ရှည်လျားသော စာသားတစ်ခုပါသည့် div တစ်ခုရှိသည်ဆိုပါစို့။ ထိုစာသား၏ အစတွင် ရုပ်ပုံတစ်ပုံထည့်ကြည့်ရအောင်။

<div>
	<img src="img.png" alt="">
	some long text
</div>

div {
	width: 400px;
	text-align: justify;
}

မြင်တွေ့ရသည့်အတိုင်း ရုပ်ပုံ၏အောက်ခြေသည် စာသား၏ ပထမစာကြောင်းပေါ်တွင် တည်ရှိပြီး ကျန်အပိုင်းများသည် အပေါ်ဘက်သို့ ထွက်သွားသည်။ ရုပ်ပုံ၏ ညာဘက်တွင် ကြီးမားသော ဗလာနေရာတစ်ခု ဖြစ်ပေါ်နေသည်။ စာသားသည် ထိုဗလာနေရာကို ဖြည့်စွက်စေရန် လုပ်ကြည့်ကြပါစို့။ ဤအတွက် ရုပ်ပုံကို float ဂုဏ်သတ္တိ left တန်ဖိုးဖြင့် သတ်မှတ်ပေးပါမည်။

<div>
	<img src="img.png" alt="">
	some long text
</div>

div {
	width: 400px;
	text-align: justify;
}
img {
	float: left;
}

ဒီတော့ အခု ရုပ်ပုံသည် ဘယ်ဘက်တွင် မျောနေပြီး စာသားသည် ၎င်းကို ညာဘက်မှ ဝန်းရံနေသည်။ ဤသို့ဖြင့် ရုပ်ပုံဘေးရှိ ဗလာနေရာ ပျောက်ကွယ်သွားသည်။

ရုပ်ပုံအား ဘယ်ဘက်တွင် မဟုတ်ဘဲ ညာဘက်တွင် မျောစေရန် လည်း လုပ်နိုင်သည်။ ဤအတွက် float ကို right တန်ဖိုးသို့ ပြောင်းသတ်မှတ်ပါ။

<div>
	<img src="img.png" alt="">
	some long text
</div>

div {
	width: 400px;
	text-align: justify;
}
img {
	float: right;
}

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