Clearfix ja vanema elemendi kõrgus CSS-is

Jätame ühe divi klassiga parent, eemaldame sellest teksti, jättes alles ainult hõljutava pildi. Nagu te juba teate, sel juhul kollabeb divi kõrgus nulli, sellest jääb alles ainult ülemine ja alumine piir. Pilt agja ulubub meie divist alt välja:

<div class="parent">
	<img src="img.png" alt="">
</div>

.parent {
	border: 1px solid red;
}
.parent img {
	float: left;
}

Teeme nii, et hõljuv pilt laiendaks meie divi kõrguses. Selleks kasutatakse kavalat võtet - paneme pärast pilti divi ilma tekstita klassiga clearfix.

Meie pilt on hõljuv element ja ei laienda vanemat kõrguses, kuid div-clearfix - ei ole hõljuv ja mõjutab vanema kõrgust.

Kuna div-clearfixile on antud omadus clear, siis saab nii, et see tõukab pilti alla ja seisab selle all, laiendades samal ajal vanemat kõrguses.

Div-clearfix ise on tühi ja ei ole ekraanil nähtav, kuid samas laiendab vanemat kõrguses.

Nii, proovime:

<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;
}