Пловајући елементи под ознакама у CSS

Претпоставимо да тренутно имамо два пасуса и слику, смештену у првом пасусу. Претпоставимо да ова слика има постављено својство float са вредношћу right, као и полупровидност:

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

Результат:

Сада поставимо у HTML коду слику после првог пасуса и погледајмо шта ће се десити:

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

Результат:

Као што видимо, тексту другог пасуса се обавија око слике, али не и тексту првог пасуса.

Хајде да уопште преместимо нашу слику после другог пасуса. У том случају ће пловати са десне стране, али неће бити обавијања:

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

Результат:

Испоставља се да ће се око слике обавијати само они елементи који се налазе испод ње, али не и они који се налазе изнад ње.