Clearfix ja vanhemman korkeus CSS:ssä

Jätetään yksi div luokalla parent, poistetaan siitä teksti ja jätetään vain kelluva kuva. Kuten jo tiedät, tässä tapauksessa divin korkeus kutistuu nollaan, siitä jää vain ylä- ja alareunus. Kuva tunkeutuu ulos divistämme alhaalta:

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

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

Tehdään niin, että kelluva kuva laajentaa diviämme korkeussuunnassa. Tätä varten käytetään ovela keino - laitamme kuvan jälkeen divin ilman tekstiä luokalla clearfix.

Kuvamme on kelluva elementti eikä laajenna vanhemman korkeutta, mutta clearfix-div - ei ole kelluva ja vaikuttaa vanhemman korkeuteen.

Koska clearfix-diville on asetettu ominaisuus clear, niin käy niin, että se työntyy kuvan vaikutuksesta alas ja pysyy sen alapuolella, laajentaen samalla vanhemman korkeutta.

Clearfix-div itse on tyhjä eikä näy näytöllä, mutta laajentaa samalla vanhemman korkeutta.

Joten, kokeillaan:

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