Clearfix og forældrehøjde i CSS

Lad os efterlade en div med klassen parent, fjerne teksten fra den og kun efterlade det flydende billede. Som du allerede ved, i dette tilfælde vil div'ens højde kollapse til nul, kun den øverste og nederste kant vil være tilbage. Billedet vil dog stikke ud under vores div forneden:

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

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

Результат:

Lad os gøre det således, at det flydende billede udvider vores div i højden. Til dette bruges et smart trick - lad os placere en div uden tekst med klassen clearfix efter billedet.

Vores billede er et flydende element og udvider ikke forælderens højde, men div-clearfix'en - er ikke flydende og påvirker forælderens højde.

Da div-clearfix'en har egenskaben clear tildelt, vil det betyde, at den vil skubbes ned af billedet og stå under det, hvilket samtidig udvider forælderens højde.

Div-clearfix'en selv er tom og ikke synlig på skærmen, men udvider alligevel forælderens højde.

Så, lad os prøve:

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

Результат: