CSS ရှိ float ဂုဏ်သတ္တိနှင့် block များစွာ

ယခု HTML ကုဒ်တွင် div-သားတစ်ခုတည်းမဟုတ်ဘဲ နှစ်ခုရှိပြီး ၎င်းတို့နှစ်ခုလုံးအတွက် float ကို left တန်ဖိုးသတ်မှတ်ထားသည်ဆိုပါစို့။ ဘာဖြစ်သွားမလဲဆိုတာ ကြည့်ကြရအောင်။

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</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;
}

Результат:

ဒီတော့ မြင်တွေ့ရသည်အတိုင်း၊ block-သားနှစ်ခုသည် တန်းလိုက်စီစဉ်သွားပြီး၊ HTML ကုဒ်ရှိ ပထမ block သည် ဘယ်ဘက်တွင်တည်ရှိမည်ဖြစ်သည်။

ယခု left တန်ဖိုးအစား right တန်ဖိုးကို ရေးကြည့်ပါ။ ဤအခြေအနေတွင် block များသည် ညာဘက်တွင် မျောနေမည်ဖြစ်ပြီး၊ ၎င်းတို့၏ အစီအစဉ်သည် HTML ကုဒ်ရှိအစီအစဉ်နှင့် နှိုင်းယှဉ်ပါက ပြောင်းပြန်ဖြစ်သွားမည်ဖြစ်သည်။

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

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

Результат: