Učinek floatov na starša v CSS

Naj imamo zdaj div, znotraj katerega je slika. Divu določimo obrobo, sliki pa za zdaj ne določimo lastnosti float.

Poglejmo, kako bo to izgledalo v brskalniku:

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

div {
	border: 1px solid red;
}

Zdaj pa nastavimo sliki lastnost float na vrednost left. V tem primeru se zgodi neverjetna stvar - višina starša izgine, njegova spodnja obroba se bo začela takoj za zgornjo, slika pa bo štrlela navzven od svojega starša:

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

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

Izkazalo se je, da elementi, katerim je določena lastnost float, ne razširjajo svojega starša po višini.

Zamenjajmo vrednost lastnosti float iz left na vrednost right. Obnašanje starša se ne bo spremenilo, vendar bo slika začela plavati na desni:

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

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