Comportamento dei float sul genitore in CSS

Supponiamo ora di avere un div che contiene un'immagine. Impostiamo un bordo al div, e all'immagine per ora non assegniamo la proprietà float.

Diamo un'occhiata a come apparirà nel browser:

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

div {
	border: 1px solid red;
}

Ora impostiamo per l'immagine la proprietà float con valore left. In questo caso accadrà una cosa sorprendente - l'altezza del genitore scomparirà, il suo bordo inferiore inizierà subito dopo quello superiore, e l'immagine spunterà fuori dal basso del suo genitore:

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

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

Risulta che gli elementi a cui è assegnata la proprietà float, non espandono il proprio genitore in altezza.

Cambiamo il valore della proprietà float da left a right. Il comportamento del genitore non cambierà, ma l'immagine inizierà a fluttuare a destra:

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

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