CSS-də float elementlərinin valideynə təsiri

Indi tutaq ki, içərisində şəkil olan bir div-imiz var. Div-ə sərhəd təyin edək, şəkilə isə hələlik float xassəsini təyin etməyək.

Gəlin brauzerdə bu necə görünəcəyinə baxaq:

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

cssdiv {
  border: 1px solid red;
}

Результат:

İndi gəlin şəkilə float xassəsini left dəyərində təyin edək. Bu halda maraqlı bir şey baş verəcək - valideynin hündürlüyü yox olacaq, onun aşağı sərhədi dərhal yuxarı sərhəddən sonra başlayacaq, şəkil isə öz valideyninin altından çıxacaq:

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

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

Результат:

Belə çıxır ki, float xassəsi təyin olunmuş elementlər valideynlərini hündürlükdə genişlətmir.

Gəlin float xassəsinə left əvəzinə right dəyərini təyin edək. Valideynin davranışı dəyişməyəcək, lakin şəkil sağ tərəfdən üzməyə başlayacaq:

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

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

Результат: