CSS-ում ֆլոատների ազդեցությունը ծնողի վրա

Ենթադրենք, մենք ունենք div, որի ներսում կա նկար: Div-ին տանք սահման, իսկ նկարին առայժմ չտանք 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;
}