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

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

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

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

div {
	border: 1px solid red;
}

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

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