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

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

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

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

cssdiv {
  border: 1px solid red;
}

Результат:

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

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

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

Результат:

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

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

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

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

Результат: