Цлеарфик и висина родитеља у ЦСС

Хајде да оставимо један див са класом 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;
}

Результат: