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:

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

cssdiv {
  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:

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

cssdiv {
  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:

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

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

Результат: