CSS Layout - ရှင်းလင်းပြီး ရှင်းလင်းပြင်ဆင်ပါ။
ရှင်းလင်းသော အိမ်ခြံမြေ
ကျွန်ုပ်တို့သည် ပိုင်ဆိုင်မှု ကိုအသုံးပြုသောအခါ float၊ ကျွန်ုပ်တို့သည် အောက်ဖော်ပြပါဒြပ်စင်ကို အလိုရှိသည် (ညာဘက် သို့မဟုတ် ဘယ်ဘက်တွင်မဟုတ်)၊ clear
ကျွန်ုပ်တို့သည် ပိုင်ဆိုင်မှုကို အသုံးပြုရမည်ဖြစ်သည်။
clearပိုင်ဆိုင်မှုသည် ရေပေါ်ဒြပ်စင်တစ်ခု၏ဘေးရှိ ဒြပ်စင်တစ်ခုနှင့် ဖြစ်ပျက်ရမည့်အရာကို သတ်မှတ်ပေးသည် ။
ပိုင်ဆိုင်မှုသည် အောက်ပါ clearတန်ဖိုးများထဲမှ တစ်ခု ဖြစ်နိုင်သည်-
-
none- ဒြပ်စင်အား ဘယ် သို့မဟုတ် ညာဘက်တွင် ဇိမ်ခံဒြပ်စင်များအောက်တွင် တွန်းမထားပါ။ ဤသည်မှာ ပုံသေဖြစ်သည်။ -
left- ဒြပ်စင်အား ဘယ်ဘက် ဇိမ်ခံဒြပ်စင်များအောက်တွင် တွန်းထားသည်။ -
right- ဒြပ်စင်အား ညာဘက်တွင် ဇိမ်ခံဒြပ်စင်များအောက်တွင် တွန်းထားသည်။ -
both- ဒြပ်စင်အား ဘယ်နှင့်ညာ ဇိမ်ခံဒြပ်စင်များအောက်တွင် တွန်းထားသည်။ -
inherit- ဒြပ်စင်သည် ၎င်း၏မိဘထံမှ ရှင်းလင်းသောတန်ဖိုးကို အမွေဆက်ခံသည်။
float များကို ရှင်းလင်းသည့်အခါ၊ float နှင့် clear ကို တူညီသင့်သည်- element တစ်ခုသည် ဘယ်ဘက်တွင် float ဖြစ်နေပါက၊ သင်သည် ဘယ်ဘက်တွင် clear လုပ်သင့်ပါသည်။ သင်၏ မျှော့နေသော အရာသည် ဆက်လက် လွင့်နေလိမ့်မည်၊ သို့သော် ရှင်းလင်းထားသော အရာသည် ဝဘ်စာမျက်နှာပေါ်တွင် ၎င်းအောက်တွင် ပေါ်လာပါမည်။
ဥပမာ
ဤဥပမာသည် ဘယ်ဘက်ရှိ float ကိုရှင်းပေးသည်။ ဤတွင်၊ ဆိုလိုသည်မှာ <div2> ဒြပ်စင်အား ဘယ်ဘက်သို့ ဖောဖောသီသီ <div1> ဒြပ်စင်အောက်တွင် တွန်းထားသည်ကို ဆိုလိုသည်-
div1 {
float: left;
}
div2 {
clear: left;
}
အဆိုပါရှင်းလင်းချက် Hack
Floated ဒြပ်စင်သည် ပါဝင်သော ဒြပ်စင်ထက် မြင့်ပါက၊ ၎င်းသည် ၎င်း၏ ကွန်တိန်နာ၏ အပြင်ဘက်တွင် "လျှံနေမည်" ဖြစ်သည်။ ထို့နောက် ဤပြဿနာကိုဖြေရှင်းရန် clearfix hack ကိုထည့်နိုင်သည်။
Clearfix မပါဘဲ
Clearfix ဖြင့်
ဥပမာ
.clearfix {
overflow: auto;
}
The overflow: auto clearfix works well as long as you are able to keep control of your margins and padding (else you
might see scrollbars). The
new, modern clearfix hack however, is safer to use, and the following code is used for most webpages:
Example
.clearfix::after {
content: "";
clear: both;
display: table;
}
You will learn more about the ::after pseudo-element in a later chapter.