CSS'te Etiketlerin Altındaki Kayan Elemanlar

Şu anda iki paragrafımız ve ilk paragrafın içine yerleştirilmiş bir resmimiz olduğunu varsayalım. Bu resme float özelliği right değerinde atanmış olsun ve ayrıca yarı saydamlık verilmiş olsun:

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

Şimdi de HTML kodunda resmi ilk paragrafın sonrasına koyalım ve ne olacağını görelim:

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

Gördüğümüz gibi, resmi ikinci paragrafın metni sarıyor, ancak birinci paragrafın metni sarmıyor.

Resmimizi tamamen ikinci paragrafın sonrasına taşıyalım. Bu durumda sağda duracak ancak hiçbir sarma olmayacak:

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

Sonuç olarak, resmi sadece kendisinden sonra gelen elemanlar saracak, kendisinden önce gelen elemanlar sarmayacak.