Sự xuyên thấu của các phần tử float qua các thẻ trong CSS

Giả sử bây giờ văn bản của chúng ta được đặt trong các đoạn văn, và hình ảnh, được áp dụng thuộc tính float nằm phía trên các đoạn văn này. Trong trường hợp này mọi thứ sẽ hoạt động như trước đây - sự hiện diện của các thẻ khác không cản trở việc bao quanh:

<div>
	<img src="img.png" alt="">
	<p>
		some long text
	</p>
	<p>
		some long text
	</p>
</div>

div {
	width: 400px;
	border: 1px solid red;
	text-align: justify;
}
img {
	float: left;
}

Giả sử bây giờ trong đoạn văn đầu tiên có ít văn bản - trong trường hợp này hình ảnh sẽ xâm nhập vào cả đoạn văn thứ hai:

<div>
	<img src="img.png" alt="">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		some long text
	</p>
</div>

div {
	width: 400px;
	border: 1px solid red;
	text-align: justify;
}
img {
	float: left;
}