Լողացող տարրերի ներթափանցումը թեգերի միջով CSS-ում

Ենթադրենք, հիմա տեքստը տեղադրված է պարբերություններում, իսկ պատկերը, որին տրված է float հատկությունը, գտնվում է այդ պարբերությունների վերևում: Այս դեպքում ամեն ինչ կաշխատի այնպես, ինչպես աշխատում էր. այլ թեգերի առկայությունը չի խանգարում հոսքավորմանը.

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;
}

Результат: