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:

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

div {
	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:

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

div {
	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:

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

div {
	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.