CSS တွင် block များအတွက် float ဂုဏ်သတ္တိ

float ဂုဏ်သတ္တိသည် ရုပ်ပုံများအတွက်သာမက အခြား မည်သည့် block များအတွက်မဆို သက်ဆိုင်ပါသည်။

ဤအချက်ကို စမ်းသပ်ကြည့်ကြပါစို့။

ကျွန်ုပ်တို့တွင် parent ဟူသော class ရှိသည့် မိဘ block တစ်ခုရှိပြီး ၎င်းအတွင်းတွင် စာသားနှင့် child ဟူသော class ရှိသည့် သားသမီး block တစ်ခုရှိသည်ဆိုပါစို့။ block နှစ်ခုလုံးကို နယ်နိမိတ်သတ်မှတ်ပေးထားပြီး သားသမီး block အတွက် width နှင့် height ကိုပါ ထပ်မံသတ်မှတ်ပေးထားပါမည်။

html<div class="parent">
  <div class="child"></div>
  some long text
</div>

css.parent {
  border: 1px solid red;
  text-align: justify;
}
.child {
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

Результат:

ယခု သားသမီး block အတွက် float ကို left တန်ဖိုးသတ်မှတ်လိုက်ပါ - စာသားသည် ကျွန်ုပ်တို့၏ block ကို ဝန်းရံသွားပါမည်။

html<div class="parent">
  <div class="child"></div>
  some long text
</div>

css.parent {
  border: 1px solid red;
  text-align: justify;
}
.child {
  float: left;
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

Результат: