Clearfix dhe Lartësia e Prindit në CSS

Le të lëmë një div me klasën parent, heqim prej tij tekstin, duke lënë vetëm foton që noton. Siç e dini tashmë, në këtë rast lartësia e div-it do të shembet në zero, prej tij do të mbetet vetëm kufiri i sipërm dhe i poshtëm. Fotografia do të dalë jashtë div-it tonë nga poshtë:

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

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

Результат:

Le ta bëjmë në mënyrë që fotografia që noton të zgjerojë div-in tonë në lartësi. Për këtë përdoret një mashtrim i zgjuar - le të vendosim pas fotos një div pa tekst me klasën clearfix.

Fotoja jonë është një element që noton dhe nuk e zgjeron prindin në lartësi, por div-clearfix - nuk noton dhe ndikon në lartësinë e prindit.

Meqenëse div-clearfix i është caktuar vetia clear, do të ndodhë që ai do të shtyhet nga fotoja poshtë dhe do të qëndrojë nën të, duke e zgjeruar kështu prindin në lartësi.

Vetë div-clearfix është i zbrazët dhe nuk duket në ekran, por në të njëjtën kohë e zgjeron prindin në lartësi.

Pra, le të provojmë:

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

Результат: