Пловајући елементи под ознакама у CSS

Претпоставимо да тренутно имамо два пасуса и слику, смештену у првом пасусу. Претпоставимо да ова слика има постављено својство float са вредношћу right, као и полупровидност:

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

Сада поставимо у HTML коду слику после првог пасуса и погледајмо шта ће се десити:

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

Као што видимо, тексту другог пасуса се обавија око слике, али не и тексту првог пасуса.

Хајде да уопште преместимо нашу слику после другог пасуса. У том случају ће пловати са десне стране, али неће бити обавијања:

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

Испоставља се да ће се око слике обавијати само они елементи који се налазе испод ње, али не и они који се налазе изнад ње.