Plovoucí prvky pod tagy v CSS

Představme si, že nyní máme dva odstavce a obrázek, umístěný v prvním odstavci. Předpokládejme, že tomuto obrázku je nastavena vlastnost float s hodnotou right, a také poloprůhlednost:

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

A nyní umístěme v HTML kódu obrázek za první odstavec a podívejme se, co se stane:

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

Jak vidíme, obrázek obtéká text druhého odstavce, ale ne prvního.

Přesuňme náš obrázek úplně za druhý odstavec. V tomto případě bude plavat vpravo, ale k žádnému obtékání nedojde:

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

Vychází to tak, že obrázek budou obtékat pouze ty prvky, které se nacházejí pod ním, ale ne ty, které se nacházejí nad ním.