Կլիարֆիքս և ծնողի բարձրությունը CSS-ում

Եկեք թողնենք մեկ դիվ՝ parent դասով, հանենք դրանից տեքստը՝ թողնելով միայն լողացող նկարը: Ինչպես արդեն գիտեք, այս դեպքում դիվի բարձրությունը կծալվի մինչև զրո, դրանից կմնա միայն վերին և ստորին սահմանը: Նկարը կդուրս գա մեր դիվից ներքևից.

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

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

Եկեք անենք այնպես, որ լողացող նկարը բարձրացնի մեր դիվի բարձրությունը: Դրա համար օգտագործվում է խորամանկ հնարք՝ նկարից հետո տեղադրենք դիվ առանց տեքստի՝ clearfix դասով:

Մեր նկարը լողացող տարր է և չի բարձրացնում ծնողի բարձրությունը, բայց դիվ-կլիարֆիքսը՝ ոչ լողացող է և ազդում է ծնողի բարձրության վրա:

Քանի որ դիվ-կլիարֆիքսին տրված է clear հատկությունը, ապա կստացվի, որ այն կհրի նկարին ներքև և կկանգնի դրա տակ՝ դրանով իսկ բարձրացնելով ծնողի բարձրությունը:

Դիվ-կլիարֆիքսը ինքնին դատարկ է և տեսանելի չէ էկրանին, բայց միաժամանակ բարձրացնում է ծնողի բարձրությունը:

Այսպիսով, եկեք փորձենք.

<div class="parent">
	<img src="img.png" alt="">
	<div class="clearfix"></div>
</div>

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

.clearfix {
	clear: both;
}