Clearfix ir tėvinio elemento aukštis CSS

Palikime vieną div su klase parent, pašalinkime iš jo tekstą, palikdami tik plaukiantį paveikslėlį. Kaip jau žinote, šiuo atveju div aukštis susitrauks iki nulio, iš jo liks tik viršutinė ir apatinė sienelė. Paveikslėlis išlips iš mūsų div apačioje:

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

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

Padarykime taip, kad plaukiantis paveikslėlis padidintų mūsų div aukštį. Tam naudojamas gudrus būdas - po paveikslėlio pastatykime div be teksto su klase clearfix.

Mūsų paveikslėlis yra plaukiantis elementas ir nepadidina tėvinio elemento aukščio, bet div-clearfix - nėra plaukiantis ir veikia tėvinio elemento aukštį.

Kadangi div-clearfix yra nustatyta savybė clear, taip atsitiks, kad jis bus nustumiamas paveikslėlio žemyn ir stovės po juo, tuo padidindamas tėvinio elemento aukštį.

Pats div-clearfix yra tuščias ir nematomas ekrane, bet tuo pačiu metu padidina tėvinio elemento aukštį.

Taigi, pabandykime:

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