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:

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

cssdiv {
  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:

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

cssdiv {
  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:

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

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

Результат: