Clearfix og forelderhøyde i CSS

La oss la være en div med klassen parent, fjerne teksten fra den, og bare la det flytende bildet være. Som du allerede vet, i dette tilfellet vil høyden på div-en kollapse til null, bare den øverste og nedre grensen vil forbli. Bildet vil derimot stikke ut under div-en vår nederst:

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

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

Результат:

La oss gjøre slik at det flytende bildet utvider div-en vår i høyden. For dette brukes et lurt triks - la oss plassere en div uten tekst med klassen clearfix etter bildet.

Bildet vårt er et flytende element og utvider ikke forelderen i høyden, men div-clearfixen - er ikke flytende og påvirker forelderens høyde.

Siden div-clearfixen har egenskapen clear satt, vil det føre til at den vil skyves ned av bildet og stå under det, og dermed utvide forelderen i høyden.

Div-clearfixen i seg selv er tom og ikke synlig på skjermen, men utvider likevel forelderen i høyden.

Så, la oss 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;
}

Результат: