CSS'de Clearfix ve Ebeveyn Yüksekliği

Sadece parent sınıfına sahip bir div bırakalım, içindeki metni kaldıralım ve sadece kayan resmi bırakalım. Bildiğiniz gibi, bu durumda divin yüksekliği sıfıra inecek, geriye sadece üst ve alt kenarlığı kalacak. Resim isdivimizin altından taşacak:

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

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

Результат:

Kayan resmin divimizin yüksekliğini artırmasını sağlayalım. Bunun için kullanılan zekice bir yöntem var - resimden sonra clearfix sınıfına sahip metinsiz bir div ekleyelim.

Resmimiz kayan bir element olduğu için ebeveynin yüksekliğini artırmaz, ancak clearfix div'i kayan bir element değildir ve ebeveynin yüksekliğini etkiler.

Clearfix div'ine clear özelliği atandığı için, resim tarafından aşağıya itilecek ve onun altında duracak, bu sayede ebeveynin yüksekliğini artıracak.

Clearfix div'inin kendisi boş olduğu için ekranda görünmez, ancak ebeveynin yüksekliğini artırır.

Peki, deneyelim:

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

Результат: