Lebegő elemek a címkék alatt CSS-ben

Tegyük fel, hogy most van két bekezdésünk és egy kép, amely az első bekezdésben található. Tegyük fel, hogy ennek a képnek a float tulajdonsága be van állítva right értékre, valamint átlátszóságra:

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

cssdiv {
  border: 1px solid red;
  text-align: justify;
}
p {
  border: 1px solid green;
}
img {
  float: right;
  opacity: 0.5;
}

Результат:

Most pedig helyezzük a HTML kódban a képet az első bekezdés után, és nézzük meg, mi történik:

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

cssdiv {
  border: 1px solid red;
  text-align: justify;
}
p {
  border: 1px solid green;
}
img {
  float: right;
  opacity: 0.5;
}

Результат:

Amint látjuk, a képet a második bekezdés szövege folytatja körbe, de az elsőé nem.

Helyezzük át a képünket a második bekezdés után. Ebben az esetben jobbra fog lebegni, de nem fog körbefolyni:

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

cssdiv {
  border: 1px solid red;
  text-align: justify;
}
p {
  border: 1px solid green;
}
img {
  float: right;
  opacity: 0.5;
}

Результат:

Kiderült, hogy csak azok az elemek fogják körbefolyni a képet, amelyek alatta találhatók, de nem azok, amelyek felette vannak.