CSS'те флоаттардын ата-энесине тийгизген таасири

Эми бизде сүрөттү камтыган див бар деп коёлу. Дивге чекти белгилеп, ал эми сүрөткө float касиетин белгилебей көрөлү.

Келгиле, бул браузерде кандай көрүнөрүн карап чыгалы:

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

cssdiv {
  border: 1px solid red;
}

Результат:

Эми сүрөткө float касиетин left маанисинде белгилейли. Бул учурда таң каларлык нерсе болот - ата-эменин бийиктиги жоголот, анын төмөнкү чеги үстүңкүсүнөн дароо башталат, ал эми сүрөт өзүнүн ата-энесинен төмөн сыртка чыгып кетет:

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;
}

Результат: