CSS တွင် float ဒြပ်စင်များ၏ တံတားခတ်ခြင်းအလုပ်လုပ်ပုံ

ယခုကျွန်ုပ်တို့တွင် စာသားများကို အတိုအထွာများထဲတွင်ထားပြီး float ဂုဏ်သတ္တိတစ်ခုသတ်မှတ်ထားသော ရုပ်ပုံတစ်ပုံသည် ထိုအတိုအထွာများအပေါ်တွင်တည်ရှိသည်ဆိုပါစို့။ ဤအခြေအနေတွင် အရာရာတိုင်းသည် ယခင်ကအလုပ်လုပ်ခဲ့သကဲ့သို့ပင် အလုပ်လုပ်လိမ့်မည် - အခြား tag များရှိခြင်းသည် တံတားခတ်ခြင်းကို မထိခိုက်စေပါ။

html<div>
  <img src="img.png" alt="">
  <p>
    some long text
  </p>
  <p>
    some long text
  </p>
</div>

cssdiv {
  width: 400px;
  border: 1px solid red;
  text-align: justify;
}
img {
  float: left;
}

Результат:

ယခု ပထမအတိုအထွာတွင် စာသားနည်းပါးသည်ဆိုပါစို့ - ဤအခြေအနေတွင် ရုပ်ပုံသည် ဒုတိယအတိုအထွာအထိပါ ဝင်ရောက်လာလိမ့်မည်။

html<div>
  <img src="img.png" alt="">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <p>
    some long text
  </p>
</div>

cssdiv {
  width: 400px;
  border: 1px solid red;
  text-align: justify;
}
img {
  float: left;
}

Результат: