CSS Layout - float နှင့် ရှင်းလင်းသည်။
CSS ၏ float
ပိုင်ဆိုင်မှုသည် ဒြပ်စင်တစ်ခုမည်သို့ လွင့်သင့်သည်ကို သတ်မှတ်သည်။
CSS clear
ပိုင်ဆိုင်မှုသည် ရှင်းလင်းထားသောဒြပ်စင်ဘေးတွင် မည်သည့်ဒြပ်စင်များ ပေါ်နိုင်သည်ကို သတ်မှတ်ပေးပါသည်။
float Property ၊
အကြောင်းအရာကို နေရာချထားခြင်းနှင့် ဖော်မတ်ချခြင်း အတွက် float
ပိုင်ဆိုင်မှုအား အသုံးပြုသည် ဥပမာ- ပုံတစ်ပုံကို ကွန်တိန်နာတစ်ခုအတွင်း စာသားဆီသို့ ဘယ်ဘက်သို့ မျှောပါပါစေ။
ပိုင်ဆိုင်မှုသည် အောက်ပါ float
တန်ဖိုးများထဲမှ တစ်ခု ဖြစ်နိုင်သည်-
-
left
- ဒြပ်စင်သည် ၎င်း၏ကွန်တိန်နာ၏ ဘယ်ဘက်တွင် ပေါ်နေပါသည်။ -
right
- ဒြပ်စင်သည် ၎င်း၏ကွန်တိန်နာ၏ ညာဘက်တွင် လွင့်နေပါသည်။ -
none
- ဒြပ်စင်သည် မျှောခြင်းမရှိပါ (စာသားတွင် ဖြစ်ပေါ်သည့်နေရာတွင်သာ ပြသပါမည်)။ ဤသည်မှာ ပုံသေဖြစ်သည်။ -
inherit
- ဒြပ်စင်သည် ၎င်း၏မိဘ၏ float တန်ဖိုးကို အမွေဆက်ခံသည်။
၎င်း၏ အရိုးရှင်းဆုံးအသုံးပြုမှုတွင်၊ float
ပိုင်ဆိုင်မှုကို ပုံများတစ်ဝိုက်တွင် စာသားပတ်ရန် အသုံးပြုနိုင်သည်။
ဥပမာ - float: right;
အောက်ဖော်ပြပါ ဥပမာတွင် ပုံတစ်ပုံ သည် စာသားတစ်ခုတွင် ညာဘက်သို့ လွင့်သင့်သည်ဟု သတ်မှတ်သည်-
နာကျင်မှုကိုယ်တိုင်က အချစ်ကို ပင်မသိမ်းဆည်းခြင်းဖြစ်ပါသည်။ Phasellus imperdiet၊ မဟုတ်ဘူး၊ တခါတရံမှာ ပြောခဲ့ပေမယ့် မုန်းတီးမှုရဲ့ ဆန္ဒပါ။ Maecenas သည် ပရိတ်သတ်များ ၊ ဒေါသနှင့် မချက်ပြုတ်ဘဲ ၊ အစုလိုက်အပြုံလိုက်ဘဝ ရေးသားသူဖြစ်သည်။
ဥပမာ
img {
float: right;
}
ဥပမာ - float: left;
အောက်ဖော်ပြပါ ဥပမာတွင် ပုံတစ်ပုံ သည် စာသားတစ်ခုတွင် ဘယ်ဘက် သို့ လွင့်နေသင့်သည်ဟု သတ်မှတ်သည်-
နာကျင်မှုကိုယ်တိုင်က အချစ်ကို ပင်မသိမ်းဆည်းခြင်းဖြစ်ပါသည်။ Phasellus imperdiet၊ မဟုတ်ဘူး၊ တခါတရံမှာ ပြောခဲ့ပေမယ့် မုန်းတီးမှုရဲ့ ဆန္ဒပါ။ Maecenas သည် ပရိတ်သတ်များ ၊ ဒေါသနှင့် မချက်ပြုတ်ဘဲ ၊ အစုလိုက်အပြုံလိုက်ဘဝ ရေးသားသူဖြစ်သည်။
ဥပမာ
img {
float: left;
}
ဥပမာ- float မရှိပါ။
အောက်ဖော်ပြပါ ဥပမာတွင် ပုံသည် စာသားတွင် ဖြစ်ပေါ်သည့်နေရာ (float: none;):
နာကျင်မှုကိုယ်တိုင်က အချစ်ကို ပင်မသိမ်းဆည်းခြင်းဖြစ်ပါသည်။ Phasellus imperdiet မဟုတ်ဘူး၊ တခါတရံမှာ ပြောပေမယ့် မုန်းတီးမှု လိုချင်တယ်။ Maecenas သည် ပရိတ်သတ်များ ၊ ဒေါသနှင့် မချက်ပြုတ်ဘဲ ၊ အစုလိုက်အပြုံလိုက်ဘဝ ရေးသားသူဖြစ်သည်။
ဥပမာ
img {
float: none;
}
ဥပမာ - တစ်ခုနှင့်တစ်ခု နောက်သို့ မျှောပါ။
ပုံမှန်အားဖြင့် div အစိတ်အပိုင်းများကို တစ်ခုနှင့်တစ်ခုအပေါ်တွင် ပြသမည်ဖြစ်သည်။ သို့သော်၊ ကျွန်ုပ်တို့အသုံးပြုပါက၊ float: left
ကျွန်ုပ်တို့သည် ဒြပ်စင်များ တစ်ခုနှင့်တစ်ခု ရွေ့လျားနေနိုင်သည်-
ဥပမာ
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
}