Zwevende elementen onder tags in CSS

Stel dat we nu twee alinea's en een afbeelding hebben, geplaatst in de eerste alinea. Stel dat voor deze afbeelding de eigenschap float is ingesteld op de waarde right, evenals transparantie:

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

Laten we nu in de HTML-code de afbeelding na de eerste alinea plaatsen en kijken wat er gebeurt:

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

Zoals we kunnen zien, wordt de afbeelding omgeven door de tekst van de tweede alinea, maar niet door die van de eerste.

Laten we onze afbeelding helemaal verplaatsen na de tweede alinea. In dit geval zal ze rechts zweven, maar er zal geen omringende tekst zijn:

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

Het blijkt dat alleen die elementen de afbeelding zullen omringen die eronder staan, maar niet die erboven staan.