Hangi akış engelleme (clearing) yöntemlerini biliyorsunuz ve hangi durumlarda kullanılırlar?

• overflow: hidden; veya overflow: auto;: float ile olan öğenin ebeveyn öğesine uygulanır. Yeni bir blok formatlama bağlamı (BFC) oluşturur ve böylece ebeveyn, çevresindeki öğeleri yüksekliğine dahil eder.

Durum: İçeriğin sınırların dışına çıkmasını gizlemek veya kaydırma uygulamak gerektiğinde en basit yoldur, aynı zamanda temizleme yöntemi olarak da çalışır.

• clear: both;: Önceki float ile sarmalanmış öğeleri sarmaması gereken bir öğeye uygulanır. Bu öğe, tüm çevresindeki öğelerin altında konumlandırılır.

Durum: Birbirini sarmalayan öğelerden sonra yeni bir satır veya bölüm oluşturmak istendiğinde.

• clearfix yöntemi (pseudo-öğe ::after): Belirli özelliklere sahip bir pseudo-öğe ekler, clear: both; davranışını taklit eder, ancak ek HTML öğeleri eklemeye gerek kalmaz.

.clearfix::after {
    content: ""; /* Pseudo-öğeyi göstermek için zorunlu içerik */
    display: table; /* overflow: hidden; gibi yeni bir blok formatlama bağlamı oluşturur */
    clear: both; /* Temizlemeyi uygular */
}

Durum: En yaygın ve önerilen temizleme yöntemidir, temizdir ve işaretleme yapısını bozmadan kullanılır. Çevresinde öğeler bulunan ebeveyn öğeye uygulanır.

• display: flex veya display: grid kullanımı: Öğelerin konumlandırılması için çevreleme gerektirmeyen modern düzenleme yöntemleri, böylece temizleme ihtiyacını ortadan kaldırır. Durum: Karmaşık düzenler oluştururken veya öğelerin konumlandırılmasını daha esnek hale getirmek istendiğinde.

• clear: both; ile ek bir öğe ekleme (eski yöntem): Çevresindeki öğelerden sonra boş bir HTML öğesi ekler ve ona clear: both; uygular. Durum: Artık kullanımı önerilmeyen ve istenmeyen bir yaklaşımdır, çünkü fazladan HTML ekler.