CSS да флоатларнинг ота-онага таъсири

Энди бизда див бўлиб, унинг ичида расм турсин. Дивга чегара белгилаймиз, расмга эса ҳозирча float хусусиятини бермаймиз.

Бу браузерда қандай кўринишини кўрамиз:

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

div {
	border: 1px solid red;
}

Энди расмга float хусусиятини left қийматида белгилаймиз. Бунда ажабой иш юз беради - ота-онанинг баландлиги йўқолади, унинг қуйиги чегараси юқоригисидан кейин darhol бошланади, расм эса қуйидан чиқиб, ўзининг ота-онасидан ташқарига чиқади:

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

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

Маълум бўлдики, float хусусияти берилган элементлар ўз ота-онасини баландлик бойича кенгайтирмайди.

float хусусиятига left ўрнига right қийматини ёзайлик. Ота-онанинг ҳаракати ўзгармайди, лекин расм ўнг томондан суза бошлайди:

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

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