CSS Float ve Clear Özelliği Kullanımı

0 746

CSS float HTML elemanlarını yeniden konumlandırmaya yarayan bir hizalandırma işlemidir.Blok düzeyindeki elementlerin varsayılan hizalanma kuralını değiştirmek için uygulanan en önemli CSS yöntemdir.

CSS Float Ne İşe Yarar

Blok düzeyindeki elementler, normalde bir HTML belgesinde, genişlikleri ne olursa olsun yeni bir satırdan başlarlar.Yani belgede iki tane blok düzeyinde element varsa, bunlar alt alta hizalanır.Fakat bazı durumlarda, bu elementlerin aynı satırda, yan yana olması istenebilir.İşte CSS float özelliği blok elementlerin bu varsayılan hizalanma mantıklarını değiştirmek için kullanılır.

HTML elementleri blok ve satır düzeyinde elementler olarak ayrılır.Eğer bu ifadelere aşina değilseniz buradaki yazıma bakmanızı tavsiye ederim.

CSS Float Kullanılır?

Float kaydırma işlemlerini gerçekleştirmek için bazı parametrelerden yararlanır.Bu parametreler CSS de o özelliğin aldığı değerler diye ifade edilir.

Float özelliğinin aldığı değerler : float:left | float:right | float:none | float:inherit

  • Float left : Uygulandığı blok elementi sola yaslar.
  • Float right : Uygulandığı blok elementi sağa yaslar.
  • Float none : Uygulanan float özelliğini kaldırır.Varsayılan değerdir.
  • Float inherit : Parent(ebeveyn) elementinin float özelliğini alır.

Aşağıdaki örnek çalışmanın result bölüme bakarsanız, 3 div elementinin yan yana hizalandığını görürsünüz.Normalde div elementi blok düzeyi element olduğundan, alt alta hizanlanmaları gerekirken, float özelliği sayesinde yan yana konumlandılar.

Div elementlerine float:left değerini veriyoruz.Bu da elementlerin sola yaslanmalarını ve ardından gelen elementin yanına hizalanmasını sağlamış oluyoruz.

Kod editörünün HTML,CSS ve Result butonlarına tıklayarak kodları görebilirsiniz.Kodlarda değişiklik yapmak için sağ taraftaki edit kısmını kullanbilirsiniz.

Önemli açıklama : Yukarıdaki örnekte elementlerin toplam genişlikleri bulunduğu alandan daha küçük olduğu için aynı satırda hizalanabildiler.Eğer toplam genişliklerinden daha küçük bir alanda olsalardı bu defa sığmayan element/ler alt satıra geçerdi.

Aşağıdaki örneğimizde elementlerimizi class değeri .wrap olan kapsayıcı elementin içerisine alıyoruz ve bu kapsayıcı elemente 200px genişliği veriyoruz.3 elementimizin toplam genişliği 300px olduğundan, son div elementimiz bu alan sığmayacağı için aşağıya geçiyor.

Eğer son div float:left değeri almış ise bir alt satırda sola yaslanacak, eğer float:right değeri almış ise sağ tarafa yaslanacaktır.

Float değerini right olarak değiştirip bu değerin de nasıl çalıştığını kendiniz keşfedebilirsiniz.

Float:none elementlerin varsayılan değeridir.Sonradan float: left veya float: right verilmiş bir elementin float özelliğini kaldırmaya yarar.Bazı özel durumlarda önce float özelliği verilip belirli bir durum gerçekleştiği zaman float değeri kaldırılmak istenir.Bu amaçla none değeri kullanılır..Açılır menü yapımında bu şekilde kullanıma denk gelirsiniz.

CSS Clear Özelliği

Üst kısımda öğrendiğiniz gibi CSS float, elementlerin mevcut durumlarında olağan dışı değişklik yaparak konumlandırma yapıyor.Bu değişiklikte sayfanın genelinde bozulmaya sebep oluyor.Yani sayfanın bir alanına float uygulamak, sayfanın temel taşlarıyla oynamaya eş değer.

Float özelliğinin ortaya çıkardığı bozulmaları düzeltmek için clear özelliği kullanıyoruz.Clear kullanımının ya da float bozulmalarından kurtulmanın bir kaç yöntemi var ama Nicolas Galagher tarafından ortaya atılan micro clearfix metodu en ideal yöntemdir.Bu clear kullanımını, bağlantıya tıkladığınızda göreceğiniz gibi detaylı bir şekilde anlattığımdan burada değinmeden geçiyorum.

Float Nerelerde Kullanılır?
Float mantığını kaptıktan sonra böyle bir soruya kendiniz de cevap verebilirsiniz.Ama örnek olarak grid yapılarında, menu yapımında ya da yazılarda resimleri yazının sağına soluna hizalamak için kullanılır.

Tüm CSS Dersleri için tıklayın

Bunları da beğenebilirsin