Clearfix e Altezza del Genitore in CSS

Lasciamo un div con classe parent, rimuoviamo il testo da esso, lasciando solo l'immagine fluttuante. Come già sapete, in questo caso l'altezza del div collasserà a zero, di esso rimarrà solo il bordo superiore e inferiore. L'immagine spunterà fuori dal nostro div in basso:

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

css.parent {
  border: 1px solid red;
}
.parent img {
  float: left;
}

Результат:

Facciamo in modo che l'immagine fluttuante espanda il nostro div in altezza. Per questo si usa un trucco - inseriamo dopo l'immagine un div senza testo con classe clearfix.

La nostra immagine è un elemento fluttuante e non espande il genitore in altezza, ma il div-clearfix - non è fluttuante e influisce sull'altezza del genitore.

Poiché al div-clearfix è assegnata la proprietà clear, risulterà che esso verrà spinto dall'immagine in basso e starà sotto di essa, espandendo così il genitore in altezza.

Il div-clearfix stesso è vuoto e non visibile sullo schermo, ma allo stesso tempo espande il genitore in altezza.

Quindi, proviamo:

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

css.parent {
  border: 1px solid red;
}
.parent img {
  float: left;
}

.clearfix {
  clear: both;
}

Результат: