Overflow:Hidden – Bir .clearFix Alternatifi

Belki de HTML ve CSS yazmaya yeni başlayan birinin en çok kafasını karıştıracak problemlerden biri de elementleri yasladıktan (float uyguladıktan) sonra karşılaşacağı problemlerdir.

FloatNormalde bir blok element onun içindeki başka bir element uzadığı zaman otomatik olarak uzar. Ancak bir elemente float uygulandığı zaman onu saran elementin normal akışını bozarak otomatik yüksekliği görmezden gelir. Eğer yaslanan element onu saran elementten yükseklik olarak büyükse, saran element aynı boyutunda kalır; yaslanan element ise onun üzerinden taşar.

Bu sorunun çözümü için W3C clear özelliğini öneriyor. Clear, ondan önce uygulanan yaslamaları silmek için kullanılır. Resimde verdiğim örnek üzerinden anlatayım.

#kapsayan {
 width:200px;
 padding:10px;
 border:1px solid red
}
#yaslanan {
 width:100px;
 height:100px;
 border:1px solid blue;
 background:#fff;
 float:left
}
#clear {
 clear:left
}
<div id="kapsayan">
  <div id="yaslanan"></div>
  <div id="clear"></div> /* Kendinden önce uygulanan sola yaslamayı siler. */
</div>

Float TemizlenmişResimdeki örnekte yaslamayı temizlemek herhangi bir yöntem için herhangi bir yöntem kullanılmadı. Bu nedenle yaslanan element onu saran elementin üzerinden taştı. Bunu önlemek için yaslanan elementten sonra clear:left uygulayarak hem bu yaslamanın ondan sonra gelecek elementleri etkilemesini önledik hem de onu saran elementin otomatik yüksekliği hatırlamasını sağladık.

Bazı durumlarda sadece clear metodunu kullanmak yeterli olmayabiliyor. Bunu biraz daha genişletip şu şekilde kullanmamız gerekiyor.

.clearFix {clear:both; height:0; line-height:0; font-size:0;}

Böylece tüm boyutlandırmalarını sıfırlamış oluyoruz.

Yaslamanın bu yan etkileri sadece IE’de sorun çıkarmıyor. Çünkü IE’de hasLayout diye bir kavram var. Nedir hasLayout?

hasLayout, bir elementin kendi ve onun altındaki (child) elementlerin boyutlantırılmasından ve konumlandırılmasından kendisinin sorumlu olmasıdır.

Yani yukarıda verdiğim bağlantıda bazı elementlerin kendi düzenlerinin olduğundan (having layout) bahsetmiş. Bu elementlere float dahi uygulansa yine de otomatik yüksekliği uygulayabilirler. Ancak bu özellik IE 6 ve 7’de bazı sorunlara yol açıyor. Yine aynı bağlantıda ve burada bunlardan da bahsedilmiş.

Gelgelelim W3C‘nin önerdiği bu yöntem pek de modern bir yöntem değil. Biz CSS kullanarak HTML’in şişmesini engelliyoruz. Ama bu yöntemde fazladan bir HTML kodu yazmak zorunda kalıyoruz.

Daha Modern Yöntemler

Bildiğim iki tane modern yöntem var. Birincisi:

:after kullanarak CSS eklemek.

.clearFix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

display:block = Element varsayılan inline ise clear metodunu alamayacağı için blok yapıyoruz.

Noktamızı gizlemek için de height:0 ve visibility:hidden uyguluyoruz.

IE6 ve altı :after pseudo elementini desteklemediği için hasLayout özelliğini kullanarak basitçe zoom:1 uygulayabiliriz. Ancak zoom metodu validation problemine yol açtığı için bu yöntemi kullanmak istemeyebiliriz. Onun yerine şunu kullanabiliriz:

.clearFix {display:inline-block}
.clearFix {display:block}

Bu iki kodu ayrı ayrı kullanarak IE6 ve 7’nin tekrardan düzeninin olduğu (hasLayout) hatırlatılır.

İkinci yöntem ise overflow:hidden kullanmak.

.clearFix {
 overflow:hidden;
 display:inline-block; /* IE6-7 */
}
.clearFix {display:block;}

Çok daha kolay bir yöntem bu. Ama sadece kapsayan elementin içini kullanmak gibi bir kısıtlılığının olduğu unutulmamalı.