Hangi clearing yöntemlerini biliyorsun ve hangi durumlarda kullanılırlar?

Akışın engellenmesi yöntemleri:

• clear: left; — sola doğru akışı engeller. Sol taraftaki akışkan öğelerle yan yana olmaması gereken durumda kullanılır.
• clear: right; — sağa doğru akışı engeller. Sağ taraftaki akışkan öğelerle yan yana olmaması gereken durumda kullanılır.
• clear: both; — her iki taraftaki akışı engeller. Herhangi bir akışkan öğe ile yan yana olmaması gereken durumda kullanılır. Bu en yaygın seçenektir.
• clear: none; (varsayılan değer) — akışa izin verir.

Uygulamalar:

• Ana kapsayıcının "çökmesini" önlemek için: Eğer ebeveynin tüm çocuk öğeleri (float olanlar) birbirleriyle akıyorsa, ebeveyn kapsayıcı yüksekliğini kaybeder ve çöker. Ebeveyn içindeki akışkan öğelerin ardından clear: both; içeren bir öğe eklemek veya ::after pseudo-elementi kullanmak bu sorunu çözer.
• Akışkan öğelerin ardından doğru konumlandırma için: Normal (akışkan olmayan) öğelerin, akışkan olanların altında yer alması gerekiyorsa, ve yan yana olmaması gerekiyorsa.
• Akışkan düzenlerde "sıralar" veya "satırlar" oluşturmak için: Float öğeleri birkaç satıra dizmek istiyorsanız, clear yeni bir satır başlatmak için kullanılır.

Pseudo-element ::after kullanımıyla temizleme örneği:

.clearfix::after {
  content: ""; /* Pseudo-elementin gösterilmesi için önemli */
  display: table; /* veya block */
  clear: both; /* Temizleme için temel özellik */
}

Bu clearfix sınıfı, float olan çocuk öğeleri içeren ebeveyn öğeye uygulanır.