clearFix etiketli yazılar

Daha Temiz Bir Clearfix

Bir süredir Perishable Press’i inceliyorum. Yazılarını kurcalıyorum. Yazılardan bir tanesi diğerlerine nazaran daha fazla ilgimi çekti: The New Clearfix Method. Yani yeni clearfix method’u. Daha önceden bahsettiğim Overflow:Hidden – Bir .clearFix Alternatifi ‘indeki metodunun güncellenmiş hali.

Kısaca, IE-Mac versiyonu artık ortada olmadığı için eski metodta kullanılan Mac’e özel kodları kaldırıp daha sade bir kod çıkarmışlar. Ama bu kod kendi içerisinde bazı sorunlar içeriyor. Bunlardan birazdan bahsedeceğim. Benim bu konuda asıl ilgilendiğim kısım “margin collapsing” denilen problemin yorumlardan birinde çözülmüş olması. Sırayla gidersek:

Temiz Sade Clearfix

/* Coders' Grave - Temiz Sade Clearfix */
.group:before,
.group:after {
  content:".";
  display:block;
  height:0;
  overflow:hidden;
}
.group:after {clear:both;}
.group {zoom:1;} /* IE < 8 */

Devamını oku »

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.

Devamını oku »