Dejstvo floata na roditelja u CSS

Neka sada imamo div, u kojem se nalazi slika. Divu ćemo zadati granicu, a slici za sada nećemo zadati svojstvo float.

Hajde da pogledamo kako će ovo izgledati u pretraživaču:

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

div {
	border: 1px solid red;
}

Sada hajde da postavimo slici svojstvo float sa vrednošću left. U ovom slučaju će se desiti neverovatna stvar - visina roditelja će nestati, njegova donja granica će početi odmah iznad gornje, a slika će iskrsnuti odozdo izvan svog roditelja:

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

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

Ispostavlja se da elementi kojima je zadato svojstvo float, ne proširuju svog roditelja po visini.

Hajde da svojstvu float umesto left napišemo vrednost right. Ponašanje roditelja se neće promeniti, ali slika će početi da pliva sa desne strane:

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

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