A lebegő elemek áthatolása a címkék között CSS-ben

Tegyük fel, hogy a szöveg bekezdésekben van elhelyezve, az a kép pedig, amelynek a float tulajdonsága van beállítva, ezen bekezdések felett található. Ebben az esetben minden ugyanúgy fog működni, mint eddig - más címkék jelenléte nem akadályozza a körbefolyást:

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

Результат:

Tegyük fel, hogy az első bekezdésben kevés a szöveg - ebben az esetben a kép belelóg majd a második bekezdésbe is:

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

Результат: