Clearfix és a szülő magassága a CSS-ben

Hagyjunk egy div-ot a parent osztállyal, távolítsuk el belőle a szöveget, csak a lebegő képet hagyjuk meg. Ahogy azt már tudod, ebben az esetben a div magassága nullára zsugorodik, csak a felső és az alsó szegélye marad meg. A kép ki fog nyúlni a divunk alulról:

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

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

Результат:

Tegyük úgy, hogy a lebegő kép kinyújtsa a divunkat magasságban. Ehhez egy trükkös módszert használnak - helyezzünk a kép után egy div-ot szöveg nélkül a clearfix osztállyal.

A képünk egy lebegő elem és nem növeli a szülő magasságát, de a clearfix div - nem lebegő és befolyásolja a szülő magasságát.

Mivel a clearfix div-nek a clear tulajdonság van beállítva, az történik, hogy a kép le fogja lökni lefelé és alatta fog állni, miközben kinyújtja a szülőt magasságban.

Maga a clearfix div üres és nem látható a képernyőn, de közben kinyújtja a szülőt magasságban.

Szóval, próbáljuk ki:

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

Результат: