Ayberk Atasay

ASP, CSS, Internet konuları üzerine paylaşımlar

CSS Çok Kullanışlı Clearfix Metodu

CSS ile tasarlama yapanların veya yapacak olanların başına gelebilecek sıkıcı bir durumdan bahsedeceğim. Bu sorun bir elemanın (div) içine başka bir eleman (div) eklendiğinde dışarıda kalan elemanın uzunluğunun içtekine göre oynamaması.

Bu sorunu ilk yaşadığımda çözmek için çok araştırdım, hatta moralimi bozup nerdeyse vazgeçecetim. Bu konuda yardımı Fatih Turan'dan aldım. Kendisi bana konu ile ilgili 3 makale adresi gönderdi. Bunlardan bana göre en basit anlatımlı olanı sizlere aktarmaya çalışıcam.

Kullanabileceğimiz iki çeşit temizleme yöntemi var;

1- {clear: both;}
2- clearfix

Clearfix Metodu için kodlarımız:

.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%;

}

Kullanımı Gayet Basit:
Bu tarz bir yapı kullanacağınız zaman dış elemanın sınıfına "clearfix" ekliyoruz.

<div class="DisCerceve clearfix"> 

	<div class="Kutu1"></div> 

	<div class="Kutu2"></div> 

</div>

Örnek dosyayı görmek için tıklayınız.

CSSAyberk Atasay26 Aralık 2008, CumaEkle Bunu

Önceki Kayıt

Sonraki Kayıt

Yorumlar

huseyin
17 Mayıs 2010, Pazartesi

bu sorun ben de de vardi ama cosumu oldugunu bile bilmiyorudum, cok tesekkurler

Görkem Kösem
3 Aralık 2009, Perşembe

Bunu

height:auto;
overflow:auto;

kullanarak yapmakta mümkün ama eski tarayıcılar için sorun çıkartabiliyordu sanırım.