Clearfix ja vanhemman korkeus CSS:ssä

Jätetään yksi div luokalla parent, poistetaan siitä teksti ja jätetään vain kelluva kuva. Kuten jo tiedät, tässä tapauksessa divin korkeus kutistuu nollaan, siitä jää vain ylä- ja alareunus. Kuva tunkeutuu ulos divistämme alhaalta:

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

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

Результат:

Tehdään niin, että kelluva kuva laajentaa diviämme korkeussuunnassa. Tätä varten käytetään ovela keino - laitamme kuvan jälkeen divin ilman tekstiä luokalla clearfix.

Kuvamme on kelluva elementti eikä laajenna vanhemman korkeutta, mutta clearfix-div - ei ole kelluva ja vaikuttaa vanhemman korkeuteen.

Koska clearfix-diville on asetettu ominaisuus clear, niin käy niin, että se työntyy kuvan vaikutuksesta alas ja pysyy sen alapuolella, laajentaen samalla vanhemman korkeutta.

Clearfix-div itse on tyhjä eikä näy näytöllä, mutta laajentaa samalla vanhemman korkeutta.

Joten, kokeillaan:

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

Результат: