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