Unsur Apungan di Bawah Tag dalam CSS

Katakan sekarang kita mempunyai dua perenggan dan satu imej, ditempatkan dalam perenggan pertama. Katakan untuk imej ini kita tetapkan sifat float dengan nilai right, dan juga ketelusan separa:

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

Sekarang mari kita letakkan imej dalam kod HTML selepas perenggan pertama dan lihat apa yang berlaku:

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

Seperti yang kita lihat, teks dari perenggan kedua mengelilingi imej, tetapi bukan dari perenggan pertama.

Mari kita alihkan imej kita selepas perenggan kedua. Dalam kes ini, ia akan terapung di sebelah kanan, tetapi tiada sebarang pengelilingan akan berlaku:

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

Ternyata, hanya unsur-unsur yang berada di bawah imej yang akan mengelilinginya, tetapi bukan unsur-unsur yang berada di atasnya.