Bilgiler
  • Ekleyen:
  • Ayberk Atasay
  • Tarih:
  • December 26, 2008
  • Kategori:
  • CSS
  • Paylas:
CSS Cok Kullanisli Clearfix Metodu

CSS ile tasarlama yapanlarin veya yapacak olanlarin basina gelebilecek sikici bir durumdan bahsedecegim. Bu sorun bir elemanin (div) icine baska bir eleman (div) eklendiginde disarida kalan elemanin uzunlugunun ictekine gore oynamamasi.

Bu sorunu ilk yasadigimda cozmek icin cok arastirdim, hatta moralimi bozup nerdeyse vazgececetim. Bu konuda yardimi Fatih Turan'dan aldim. Kendisi bana konu ile ilgili 3 makale adresi gonderdi. Bunlardan bana gore en basit anlatimli olani sizlere aktarmaya calisicam.

Kullanabilecegimiz iki cesit temizleme yontemi var;

1- {clear: both;}
2- clearfix

Clearfix Metodu icin kodlarimiz:
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
}


Kullanimi Gayet Basit:
Bu tarz bir yapi kullanacaginiz zaman dis elemanin sinifina "clearfix" ekliyoruz.
<div class="DisCerceve clearfix">
<div class="Kutu1"></div>
<div class="Kutu2"></div>
</div>


ornek dosyayi gormek icin tiklayiniz.
Yorumlar
  • Eski Yorumlar:
  • Gorkem Kosem
  • Bunu height:auto; overflow:auto; kullanarak yapmakta mumkun ama eski tarayicilar icin sorun cikartabiliyordu sanirim.
  • 2009-12-03 18:45:27
  • huseyin
  • bu sorun ben de de vardi ama cosumu oldugunu bile bilmiyorudum, cok tesekkurler
  • 2010-05-17 12:04:11