CSS Float Kaymalarını CSS Clear İle Düzeltmek

0 228

Bir web sayfasının yapısını değiştirmek için bir çok yöntem vardır.Bunlar arasında en çok tercih edilen yöntemlerden biri de elementleri sağ veya sola hizalayan float özelliğidir.Fakat float doğru şekilde kullanılmazsa site yapısında bozulmalar meydana geliyor.

Bu sebeple float bozulmalarını temizlemek için clear özelliği oluşturulmuştur.Fakat bu özelliğin kullanım şekli oldukça önemlidir.

İlk zamanlar bozulmalar için sadece clear:both; değeri kullanılıyordu.Fakat bu yöntem başka sorunlara yol açtığından farklı yöntemler arandı.Bir diğer yöntem de float atanmış elementleri kapsayan kapsayıcı elemente overflow: auto; vermekti.Bu yöntemde de istenilen neticeyi vermedi.

En sonunda Nicolas Galagher tarafından micro clearfix yöntemi ortaya atıldı.Bu teknik şuan da float bozulmalarını düzeltmek için en uygun yöntemdir.

Aşağıdaki HTML kısmını daha rahat kavramanız için veriyorum.Burada bir tane kapsayıcı elemanımız (.container) var.Bu eleman float uygulanmış iki elemanı kapsamaktdır.Yöntemimiz de bu kapsayıcı elemana uygulanmaktadır.

HTML Kodları

CSS Kodları

Bunları da beğenebilirsin