Float-elementtien vaikutus vanhempaan CSS:ssä

Oletetaan nyt, että meillä on div, jonka sisällä on kuva. Asetetaan diville reunus, mutta kuvalle emme vielä aseta float-ominaisuutta.

Katsotaan miltä se näyttää selaimessa:

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

div {
	border: 1px solid red;
}

Asetetaan nyt kuvalle float-ominaisuuden arvo left. Tässä tapauksessa tapahtuu ihmeellinen asia - vanhemman korkeus katoaa, sen alareuna tulee välittömästi yläreunan jälkeen, ja kuva tunkeutuu alhaalta vanhempansa alitse:

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

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

Osoittautuu, että elementit, joille on asetettu float-ominaisuus, eivät laajenna vanhempaansa korkeussuunnassa.

Asetetaan float-ominaisuudelle left:n sijasta arvo right. Vanhemman käyttäytyminen ei muutu, mutta kuva alkaa kellua oikealla:

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

div {
	border: 1px solid red;
}
img {
	float: right;
}