Продирање плутајућих елемената кроз тагове у 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;
}

Результат: