Кліарфікс та висота батька

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