CSS'de Float'ların Ebeveyn Üzerindeki Etkisi

Şimdi elimizde içinde bir resim bulunan bir div olsun. Div'e bir kenarlık verelim, resme ise şimdilik float özelliği vermeyelim.

Tarayıcıda bunun nasıl görüneceğine bir bakalım:

<div>
	<img src="img.png" alt="">
</div>

div {
	border: 1px solid red;
}

Şimdi resme float özelliğini left değerinde ayarlayalım. Bu durumda şaşırtıcı bir şey olacak - ebeveynin yüksekliği kaybolacak, alt kenarlığı hemen üst kenarlıktan sonra başlayacak ve resim kendi ebeveyninin altından taşacak:

<div>
	<img src="img.png" alt="">
</div>

div {
	border: 1px solid red;
}
img {
	float: left;
}

Sonuç olarak, float özelliği atanmış elemanlar ebeveynlerinin yüksekliğini genişletmez.

float özelliğine left yerine right değerini yazalım. Ebeveynin davranışı değişmeyecek ancak resim sağdan kaymaya başlayacak:

<div>
	<img src="img.png" alt="">
</div>

div {
	border: 1px solid red;
}
img {
	float: right;
}