Clearfix och förälderhöjd i CSS

Låt oss lämna kvar en div med klassen parent, ta bort texten från den och bara lämna kvar den flytande bilden. Som du redan vet kommer höjden på div:en då att kollapsa till noll, bara den övre och nedre ramen kommer att finnas kvar. Bilden kommer att sticka ut under vår div:

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

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

Результат:

Låt oss se till att den flytande bilden expanderar vår div i höjdled. För detta används ett knepigt trick - sätt en div efter bilden utan text med klassen clearfix.

Vår bild är ett flytande element och expanderar inte föräldern i höjdled, men div-clearfix - är inte flytande och påverkar förälderns höjd.

Eftersom div-clearfix har egenskapen clear tilldelad, kommer den att tryckas ner av bilden och stå under den, samtidigt som den expanderar föräldern i höjdled.

Själva div-clearfix är tom och syns inte på skärmen, men den expanderar föräldern i höjdled.

Så, låt oss prova:

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;
}

Результат: