Schwebende Elemente unter Tags in CSS

Nehmen wir an, wir haben jetzt zwei Absätze und ein Bild, das im ersten Absatz platziert ist. Nehmen wir an, für dieses Bild ist die Eigenschaft float mit dem Wert right sowie Halbtransparenz festgelegt:

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

Lassen Sie uns nun das Bild im HTML-Code nach dem ersten Absatz platzieren und schauen, was passiert:

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

Wie wir sehen können, wird das Bild vom Text des zweiten Absatzes umflossen, aber nicht vom ersten.

Lassen Sie uns unser Bild komplett nach dem zweiten Absatz verschieben. In diesem Fall wird es rechts schweben, aber es wird kein Umfließen geben:

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

Es stellt sich heraus, dass das Bild nur von denjenigen Elementen umflossen wird, die sich darunter befinden, aber nicht von denen, die sich darüber befinden.