Plavajoči elementi pod oznakami v CSS

Recimo, da imamo zdaj dva odstavka in sliko, nameščeno v prvem odstavku. Naj ima ta slika nastavljeno lastnost float na vrednost right in tudi prosojnost:

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

Результат:

In zdaj postavimo sliko v HTML kodi za prvi odstavek in poglejmo, kaj se zgodi:

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

Результат:

Kot vidimo, besedilo drugega odstavka obteka sliko, besedilo prvega pa ne.

Postavimo sliko popolnoma za drugi odstavek. V tem primeru bo plavala na desni, vendar obtekanja ne bo:

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

Результат:

Izkazalo se je, da bodo sliko obtekali le tisti elementi, ki se nahajajo pod njo, ne pa tisti, ki so nad njo.