Éléments flottants sous les balises en CSS

Supposons que nous ayons maintenant deux paragraphes et une image, placée dans le premier paragraphe. Supposons que pour cette image nous ayons défini la propriété float avec la valeur right, ainsi qu'une semi-transparence :

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

Et maintenant, plaçons l'image dans le code HTML après le premier paragraphe et voyons ce qui se passe :

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

Comme nous pouvons le voir, l'image est entourée par le texte du deuxième paragraphe, mais pas par le premier.

Déplaçons complètement notre image après le deuxième paragraphe. Dans ce cas, elle flottera à droite, mais il n'y aura aucun habillage :

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

Il s'avère que seuls les éléments situés en dessous de l'image l'habilleront, mais pas ceux qui se trouvent au-dessus d'elle.