Клиарфикс и высота родителя

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