CSS clear nedir?

CSS clear, bir öğenin kendisinden önceki yüzen (float) öğelerin yanına yerleşmesini engelleyen özelliktir. Örneğin bir görsel float: left ile sola alındığında, sonraki paragraf görselin sağına akabilir. Paragrafa clear: left verirseniz paragraf, görselin altına geçer. clear float özelliğini kaldırmaz; yalnızca uygulandığı öğenin ilgili float’ın yanında başlamasını engeller.

clear değerleri nasıl çalışır?​

clear değeri hangi taraftaki float’ların dikkate alınacağını belirler:



Karar verirken clear: left veya clear: right yalnızca belirli bir tarafı etkiler. Hangi tarafta float olduğunu bilmiyorsanız ya da iki taraftaki float’ın da geçilmesi gerekiyorsa clear: both kullanılır. Gereğinden geniş kapsamlı both kullanmak öğeyi beklenenden daha aşağıya taşıyabilir.

Çalışan en küçük örnek​

Aşağıdaki örnekte görsel yerine sabit boyutlu bir kutu kullanılmıştır. İkinci kutu, ilk kutunun yanında akmak yerine onun altından başlar:



Uygulama sırası şöyledir:

1. Yanına metin akmasını istediğiniz öğeye float: left veya float: right verin.
2. Float’ın yanında başlamaması gereken sonraki öğeyi seçin.
3. Yalnız sol float’ı geçmek için clear: left, yalnız sağ float’ı geçmek için clear: right yazın.
4. İki tarafın da geçilmesi gerekiyorsa clear: both uygulayın.
5. Tarayıcıda öğenin float’ın altına geçtiğini kontrol edin. Geçmiyorsa clear kuralının gerçekten hedef öğeye uygulandığını ve başka bir seçicinin kuralı geçersiz kılmadığını denetleyin.

Başarı sonucu, clear verilen öğenin ilgili float ile aynı yatay alanda başlamamasıdır. Öğenin hâlâ yanında görünmesi genellikle yanlış tarafın seçildiğini, seçicinin eşleşmediğini veya kuralın başka bir CSS kuralıyla geçersiz kılındığını gösterir. Geliştirici araçlarında öğeyi seçip hesaplanan clear değerini kontrol edebilirsiniz.

clear ile ilgili önemli sınırlama​

clear normal akıştaki blok öğenin konumunu etkiler. Temizlenen çocuk aynı kapsayıcı içindeyse onun alt konumu kapsayıcının yüksekliğine de katkı verebilir; clear hiçbir zaman kapsayıcıyı büyütmez demek doğru değildir. Bu nedenle üst kapsayıcının arka planı veya kenarlığı yüzen içeriği kapsamıyor gibi görünebilir. Amacınız sonraki tek bir öğeyi aşağı taşımaksa clear doğrudan çözümdür. Amacınız float’ları kapsayıcı içinde tutmaksa kapsayıcıya uygun bir kapsama yöntemi, örneğin modern düzenlerde display: flow-root, düşünülmelidir.

Ayrıca clear, flex veya grid düzenindeki öğeleri taşımak için genel bir hizalama aracı değildir. İçerik flex ya da grid ile kurulmuşsa sıralama ve hizalama kararları o düzen modelinin özellikleriyle verilmelidir. clear en çok eski veya bilinçli olarak float kullanan düzenlerde anlamlıdır.

Sık yapılan hatalar​

• Float’ı kaldıracağını sanmak: clear float’ı silmez; yalnızca sonraki öğeyi onun altına iter.
• Yanlış tarafı seçmek: Sağda duran bir float için yalnız clear: left kullanmak beklenen sonucu vermeyebilir.
• Her yerde clear: both kullanmak: Bu değer, karşı taraftaki float’ları da beklediği için gereksiz boşluk oluşturabilir.
• Clear ile kapsayıcı oluşturmayı aynı sanmak: clear önceki float etkisini temizler; flow-root ise kapsayıcı için yeni bir blok biçimlendirme bağlamı oluşturur.

Kaynaklar​

• MDN: clear

Sık sorulan sorular​

clear yerine margin-top kullanabilir miyim?​

Margin yalnızca görsel bir boşluk oluşturur; float’ın yüksekliği değiştiğinde veya farklı ekran genişliğinde öğenin gerçekten altına geçmesini garanti etmez. Float ilişkisini kesmek gerekiyorsa clear daha doğru araçtır.

clear değerini aynı öğede birden fazla yazabilir miyim?​

Aynı özellikte son geçerli bildirim kullanılır. Örneğin önce clear: left, sonra clear: both yazılırsa sonuç both olur; iki kuralın etkisi ayrı ayrı birikmez.