CSS float Property
ဥပမာ
ပုံတစ်ပုံကို ညာဘက်သို့ လွင့်ပါစို့-
img
{
float: right;
}
အောက်တွင် နောက်ထပ် "စမ်းသုံးကြည့်ပါ" ဥပမာများ။
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
ပိုင်ဆိုင်မှု သည် float
ဒြပ်စင်တစ်ခုသည် ဘယ်ဘက်၊ ညာဘက်သို့ လွင့်သင့်သည်ဖြစ်စေ လုံးဝမပေါ်ကြောင်း သတ်မှတ်သည်။
မှတ်ချက်- နေရာချထားသော အစိတ်အပိုင်းများသည် float
ပိုင်ဆိုင်မှုကို လုံးဝလျစ်လျူရှုသည်။
မှတ်ချက် ။ ၎င်းကိုရှောင်ရှားရန်၊ ရှင်းလင်းသော ပိုင်ဆိုင်မှု သို့မဟုတ် clearfix hack ကိုအသုံးပြုပါ (ဤစာမျက်နှာ၏အောက်ခြေတွင်ဥပမာကိုကြည့်ပါ)။
မူလတန်ဖိုး: | မရှိ |
---|---|
အမွေဆက်ခံသည်- | မဟုတ်ဘူး |
သက်ဝင်လှုပ်ရှားနိုင်သော | မဟုတ်ဘူး ကာတွန်း အကြောင်းဖတ်ပါ။ |
ဗားရှင်း- | CSS1 |
JavaScript syntax- | အရာဝတ္ထု .style.cssFloat="left" |
Browser ပံ့ပိုးမှု
ဇယားရှိ နံပါတ်များသည် ပိုင်ဆိုင်မှုကို အပြည့်အဝထောက်ခံသည့် ပထမဆုံးဘရောက်ဆာဗားရှင်းကို သတ်မှတ်ပေးသည်။
Property | |||||
---|---|---|---|---|---|
float | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
CSS Syntax
float: none|left|right|initial|inherit;
အိမ်ခြံမြေတန်ဖိုးများ
Value | Description | Play it |
---|---|---|
none | The element does not float, (will be displayed just where it occurs in the text). This is default | |
left | The element floats to the left of its container | |
right | The element floats the right of its container | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
နောက်ထပ် ဥပမာများ
ဥပမာ
ပုံတစ်ပုံကို ဘယ်ဘက်တွင် မျှောပါစို့-
img
{
float: left;
}
ဥပမာ
ပုံကို စာသားတွင် ဖြစ်ပေါ်သည့်နေရာတွင်သာ ပြသပါစေ (float: none):
img
{
float: none;
}
ဥပမာ
စာပိုဒ်တစ်ပိုဒ်၏ ပထမစာလုံးကို ဘယ်ဘက်တွင် ပေါ်အောင်ထားပြီး စာလုံးပုံစံကို စတိုင်လ်ကျပါစေ။
span {
float: left;
width:
0.7em;
font-size: 400%;
font-family: algerian, courier;
line-height: 80%;
}
ဥပမာ
အလျားလိုက်မီနူးတစ်ခုဖန်တီးရန် ဟိုက်ပါလင့်ခ်များစာရင်းနှင့်အတူ float ကိုသုံးပါ-
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {width: 25%;}
.content {width: 75%;}
ဥပမာ
header၊ footer၊ left content နှင့် main content ပါသော ပင်မစာမျက်နှာကို ဖန်တီးရန် float ကိုသုံးပါ-
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {width: 25%;}
.content {width: 75%;}
ဥပမာ
သတ်မှတ်ထားသော <p> ဒြပ်စင်တစ်ခု၏ ဘယ်ဘက် သို့မဟုတ် ညာဘက်ခြမ်းရှိ ရေပေါ်ဒြပ်စင်များကို ခွင့်မပြုပါနှင့်။
img {
float: left;
}
p.clear {
clear: both;
}
ဥပမာ
ရေပေါ်ဒြပ်စင်သည် ပါဝင်သောဒြပ်စင်ထက် ပိုမြင့်ပါက၊ ၎င်းသည် ၎င်း၏ကွန်တိန်နာအပြင်ဘက်သို့ ပြည့်လျှံသွားမည်ဖြစ်သည်။ ၎င်းကို "clearfix hack" ဖြင့် ဖြေရှင်းရန် ဖြစ်နိုင်သည်-
.clearfix::after {
content: "";
clear: both;
display: table;
}
ဆက်စပ်စာမျက်နှာများ
CSS သင်ခန်းစာ- CSS Float
HTML DOM ရည်ညွှန်းချက်- cssFloat ပိုင်ဆိုင်မှု