Các phần tử trôi nổi bên dưới các thẻ trong CSS

Giả sử bây giờ chúng ta có hai đoạn văn và một hình ảnh, được đặt trong đoạn văn thứ nhất. Giả sử hình ảnh này được đặt thuộc tính float với giá trị right, và cũng có độ trong suốt:

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

Và bây giờ hãy đặt hình ảnh trong mã HTML sau đoạn văn đầu tiên và xem điều gì sẽ xảy ra:

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

Như chúng ta có thể thấy, văn bản của đoạn thứ hai bao quanh hình ảnh, nhưng đoạn đầu tiên thì không.

Hãy di chuyển hoàn toàn hình ảnh của chúng ta ra sau đoạn văn thứ hai. Trong trường hợp này, nó sẽ trôi nổi ở bên phải, nhưng sẽ không có văn bản nào bao quanh:

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

Hóa ra, chỉ những phần tử nằm bên dưới hình ảnh mới bao quanh nó, còn những phần tử nằm phía trên thì không.