Web sitenizin bir bölümüne sola dayalı ve sağa dayalı bir görsel - metin eklediğiniz zaman, birbirine geçtiğini, görünümün bozulduğunu görebilirsiniz. İşte bu gibi sebeplerden ötürü, bir sonraki işlemdeki float parametresini sıfırlamak için "clearfix" dediğimiz olay bize yardımcı olmaktadır. Sizlerle en çok önerilen clearfix yöntemini paylaşmak istiyoruz. Aşağıdaki kodları gerekli yerlerde kullanarak, sola veya sağa yaslama durumlarında ilgili div'lerin iç içe geçmesini önleyebilirsiniz.

AYRICA: HTML Otomatik Tamamlama Kapatma Nasıl Yapılır?

Clearfix Nedir? Ne İşe Yarar? Nasıl Kullanılmalıdır?

1) İlgili CSS kodları aşağıdaki gibi olacaktır.

.clearfix::after {
content: "";
clear: both;
display: table;
}

2) HTML kodumuz ise aşağıdaki gibidir.

<div class="clearfix"></div>

Not: Clearfix parametresini gerekli olmayan alanlarda kullanmanıza gerek yoktur. Yalnızca gerekli olduğunda ve iki div'in birbirine ait float değerlerinin karışmaması adına, bunları temizlemek amacı ile kullanmayı düşünebilirsiniz.