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:

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

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

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

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

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

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