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

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

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

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

Результат:

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

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

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

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

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

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

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

.clearfix {
  clear: both;
}

Результат: