CSS'te kayan öğeler (floats) nasıl çalışır?

CSS'teki float öğeleri, belge akışından çıkarılır ve belirtilen yönde (sol veya sağ) kapsayıcı bloğu içinde kaydırılır. Yan yana gelen satır içi öğeler ve içerik, karşıt taraftaki float öğeyi sarmaya başlar.

float özelliklerinin temel özellikleri:

• left: Öğeyi sola kaydırır.
• right: Öğeyi sağa kaydırır.
• none: Öğeyi normal akışta tutar (varsayılan değer).
• inherit: Değeri ebeveyn öğeden miras alır.

Genellikle Flexbox ve Grid ortaya çıkmadan önce çok sütunlu düzenler oluşturmak için kullanılmıştır.

Davranış özellikleri:

• Float öğesi, orijinal görüntüleme türünden bağımsız olarak blok haline gelir.
• Ana kapsayıcı yüksekliği, float öğenin yüksekliğini dikkate almaz, bu da kapsayıcının "çökmesine" neden olabilir. Bu sorunu çözmek için temizleme yöntemleri kullanılır.

Temizleme yöntemleri:

• clear özelliği: Bir öğenin float öğeler tarafından sarmalanmasını engellemek için uygulanır. Değerler: left, right, both, none, inherit.

  /* Öğenin her iki taraftaki float öğeleri tarafından sarmalanmaması */
  .clear-both {
    clear: both;
  }
  

• Clearfix tekniği: Ana kapsayıcıya :after pseudo-element eklenerek, clear: both ve diğer stillerle, çökme önlenir.

  /* klasik clearfix */
  .clearfix::after {
    content: "";
    display: table; /* veya "block" */
    clear: both;
  }
  

Daha modern düzenleme yöntemleri ortaya çıkmasına rağmen, float küçük öğeler için hâlâ faydalı olabilir, örneğin, metin içinde resim yerleştirmek için.