CSSda ota-ona balandligi va clearfix

Keling, parent klassiga ega bo'lgan bitta div-ni qoldiramiz, undan matnni olib tashlab, faqat suzuvchi rasmni qoldiramiz. Siz bilasizki, bu holda divning balandligi nolga tushadi, undan faqat yuqori va pastki chegara qoladi. Rasm esa bizning divimizdan pastga chiqib ketadi:

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

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

Результат:

Keling, suzuvchi rasm divimizning balandligini oshirishini ta'minlaylik. Buning uchun aqlli usul qo'llaniladi - rasmdan keyin clearfix klassiga ega bo'lgan, matnsiz div qo'yamiz.

Bizning rasmimiz suzuvchi element bo'lib, ota-onaning balandligini oshirmaydi, lekin clearfix divi - suzuvchi emas va ota-ona balandligiga ta'sir qiladi.

Clearfix diviga clear xususiyati berilganligi sababli, u rasm tomon pastga itariladi va uning ostida turadi, shu bilan ota-onaning balandligini oshiradi.

Clearfix divi o'zi bo'sh va ekranda ko'rinmaydi, lekin shu bilan birga ota-ona balandligini oshiradi.

Xo'sh, keling sinab ko'ramiz:

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

Результат: