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

float bir öğeyi belgenin normal akışından çıkarır ve diğer öğelerin (genellikle metin veya satır içi öğeler) belirtilen taraftan (left, right) çevrelemesine izin verir.

Temel ilkeler:

• Akıştan çıkarma: float ile bir öğe, belgenin normal akışında yer kaplamaz.
• Çevreleme: Yan yana gelen blok öğeleri, float öğesinin yerini almaz ve içeriği (satır içi öğeler) belirtilen taraftan çevreler.
• Üst öğeye etkisi: Sadece float öğeleri içeren üst kapsayıcı yüksekliği sıfırlanabilir, yüksekliği göz ardı edilir.
• clear: clear özelliği (left, right, both), float öğesinden sonra gelen öğelerin çevrelemesini engellemek için kullanılır.

Örnek:

.image {
  float: left; /* Resim sola kaydırılır */
  margin-right: 10px; /* Metin için sağda boşluk eklenir */
}

.text {
  /* Metin resmi çevreleyecek */
}

Tavsiyeler:

• float kullanımı karmaşık düzenler oluşturmak için artık kullanılmamaktadır ve Flexbox veya Grid ile değiştirilmiştir.
• float, metinle birlikte resimlerin çevrelenmesi efektleri oluşturmak için hâlâ kullanılabilir.
• float kullanıldığında üst kapsayıcının çökmesini önlemek için "clearfix" teknikleri veya overflow: hidden/auto kullanılır.