CSS “float” ve “clear” Özelliği Kullanımı

Bu yazımızda, CSS “float” ve “clear” özelliklerinin kullanımını göstereceğiz.

CSS “float” Kullanımı

CSS’de “float” özelliği, bir elemanın sayfa içerisinde sola veya sağa yatay olarak hizalanmasını sağlar. Bu özellik, özellikle web tasarımının erken dönemlerinde, metnin etrafında resimlerin konumlandırılmasında oldukça popülerdi. Ancak günümüzde, özellikle flexbox ve grid gibi daha gelişmiş yerleşim tekniklerinin ortaya çıkmasıyla birlikte, “float” kullanımı çok ama çok daha az kullanılmaya başlanmıştır.

Biz “float” özelliğini bir elemana uyguladığımızda, bu eleman normal akıştan (normal flow) çıkar ve belirttiğimiz yönde (sağ veya sol) en uç noktaya hareket eder. Diğer elemanlar da bu “float” uygulanan elemanın etrafında konumlanır.

Bir HTML elementi float özelliği aldığında, ilgili elementi sayfa akışından çıkarır. Buna karşılık diğer elementler ise float uygulanan elementin etrafından akışına devam eder. CSS’de “float” özelliği aşağıdaki dört değerden birine sahip olabilir:

1. left: Elemanı sayfanın sol tarafına yatay olarak hizalar. Eğer birden fazla eleman “float: left” özelliğine sahipse, bu elemanlar soldan başlayarak sırayla yan yana dizilir.
2. right: Elemanı sayfanın sağ tarafına yatay olarak hizalar. Birden fazla eleman “float: right” özelliğine sahipse, bu elemanlar sağdan başlayarak sırayla yan yana dizilir.
3. none: Elemanın yüzdürülmesini iptal eder. Bu, varsayılan değerdir ve elemanı normal akış içerisine geri alır.
4. inherit: Eleman, “float” değerini ebeveyn elementinden alır.

“Float” uygulandığında, diğer içerikler bu yüzdürülmüş elemanın etrafında akar. Yani, bir resim sola yüzdürüldüğünde, sağ tarafındaki metin veya diğer içerikler, resmin etrafında dolaşır. Bu yüzden “float” özelliğini kullanırken dikkatli olunmalı. Zira elementlerin beklenmedik yerlere taşmasına neden olabilir. Bu tür problemleri çözmek için genellikle “clearfix” gibi tekniklerle bu sorunları gidermeye çalışırız.

Modern CSS uygulamalarında “float” özelliği pek kullanılmamaktadır. İlle de kullanılacaksa resim etrafında yazı yazmak için tercih edilmelidir. Ana sayfa yerleşimi için “flexbox” veya “grid” gibi daha modern yöntemler tercih edilmelidir.

CSS “clear” Özelliği Kullanımı

CSS’deki clear özelliği, float ile yakından ilişkilidir ve yüzdürülmüş elemanların etkilerini nasıl yöneteceğimizi belirlememize yardımcı olur.

Zira “float” özelliği uygulanan elementler kendilerinden sonra gelen elementleri de etkilemesi çoğu zaman avantajlı bir durum olsa da bazı durumlarda istenmeyen sonuçlara sebep olmaktadır.

İşte bu istenmeyen sonuçları clear özelliği ile gideririz. Bu özellik bir elemanın hangi tarafta (sol, sağ veya her iki tarafta) yüzdürülmüş önceki elemanlardan temizlenmesi gerektiğini belirtir. Özellikle, birçok float uygulanan elemanın olduğu sayfalarda, layout’un beklenmedik şekillerde bozulmasını önlemek için kritik bir role sahiptir.

CSS clear özelliğinin alabileceği değerler şunlardır:

1. left: Eleman, sol tarafta yüzdürülen elemanların altında yer alır.
2. right: Eleman, sağ tarafta yüzdürülen elemanların altında yer alır.
3. both: Eleman, hem sol hem de sağ tarafta yüzdürülen elemanların altında konumlanır. Bu, en yaygın olarak kullanılan değerdir çünkü genellikle her iki taraftaki yüzdürülmüş elemanların etkisinden tamamen kurtulmak istenir.
4. none: clear özelliğinin uygulanmamasını belirtir. Bu, varsayılan değerdir.
5. inherit: Eleman, clear değerini ebeveyn elementinden alır.

Örneğin, bir resim sola yüzdürüldüğünde ve hemen ardından bir metin paragrafı yer alıyorsa, bu metni resmin altında başlatmak için paragrafa clear: left; özelliği uygulanabilir.

“Clear” özelliği, genellikle “float” özelliği ile birlikte kullanılan “clearfix” hack’inde de görmekteyiz. Bu hack, bir ebeveynin yüzdürülmüş çocuk elemanları içermesi durumunda, ebeveynin doğru bir şekilde çocuk elemanları sarmasını sağlar.

Bir element, kendisini içeren elementten daha uzun ve genişse haliyle alanının dışına taşacaktır. Böylesi bir sorun “overflow” kullanarak çözülebilir. Ancak bu taşmaların genişlik ve yükseklik oranları kaydırma çubuklarının ortaya çıkmasına sebep olabilir.