Клиарфикс и высота родителя в 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;
}

Результат: