CSS-da teglar ostidagi suzuvchi elementlar

Hozirda bizda ikkita abzas va birinchi abzasda joylashgan rasm bor deb faraz qilaylik. Bu rasm uchun float xususiyati right qiymatiga, shuningdek, yarim shaffoflikka ega deb faraz qilaylik:

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

Endi HTML kodida rasmni birinchi abzastan keyinga qo'yamiz va nima bo'lishini ko'rib chiqaylik:

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

Ko'rib turganimizdek, rasmni ikkinchi abzas matni o'rab oladi, lekin birinchi abzasniki emas.

Keling, rasmni ikkinchi abzastan keyinga ko'chiramiz. Bu holda u o'ng tomonda suzadi, lekin hech qanday o'rash bo'lmaydi:

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

Ma'lum bo'lishicha, rasmni faqat uning ostida joylashgan elementlar o'rab oladi, uning ustida joylashgan elementlar emas.