Клиърфикс и височина на родителя в CSS

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