Elemente flotante sub etichete în CSS

Să presupunem că avem două paragrafe și o imagine, plasată în primul paragraf. Să presupunem că acestei imagini i se setează proprietatea float cu valoarea right, precum și transparență:

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

Și acum să plasăm în codul HTML imaginea după primul paragraf și să vedem ce se întâmplă:

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

După cum vedem, imaginea este înconjurată de textul din al doilea paragraf, dar nu și de cel din primul.

Să mutăm imaginea după al doilea paragraf. În acest caz, ea va pluta în dreapta, dar nu va fi înconjurată de niciun text:

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

Rezultă că imaginea va fi înconjurată doar de acele elemente care se află sub ea, dar nu de cele care se află deasupra ei.