CSS'de float'lar (yüzen öğeler) nedir?

CSS'te float, bir öğenin içeriğin etrafında sola veya sağa "yüzmesine" izin veren bir özelliktir.

Ana özellikler:

• Kaydırma: Uygulanan float özelliğine sahip öğe, ebeveyn konteynerinin sol veya sağ kenarına kayar (veya başka bir float öğesine).
• Sarmalama: Normal blok veya satır içeriği (metin, resimler) yüzmekte olan öğeyi sarar.
• Akış bağlamı: Yüzmekte olan öğeler, belgenin normal akışından kısmen çıkar, ancak diğer öğelerin konumlandırmasını etkiler.
• Uygulama: Başlangıçta kolonlar düzenlemek veya resimleri etrafına metin yerleştirmek için kullanılırdı. Modern düzenlemede genellikle Flexbox veya Grid kullanılır.

float özelliğinin tipik değerleri:

• left: Öğe sola yüzer.
• right: Öğe sağa yüzer.
• none: Öğe yüzmez (varsayılan değer).
• inherit: Üst öğeden değeri devralır.
• initial: Varsayılan değeri ayarlar.

Float ile ilgili sorunlar:

• Ebeveynin çökmesi: Sadece yüzmekte olan öğeleri içeren ebeveyn konteyner yüksekliği sıfırlanabilir.
• Temizleme: Sonraki öğelerin yüzmekte olan öğeleri sarmasını önlemek için clear özelliği kullanılmalıdır.

.image-float {
  float: left; /* Resim sola yüzer */
  margin-right: 10px; /* Resim sağında boşluk */
}

.text-content {
  /* Bu metin resmi sarmalayacak */
}

.clearfix::after {
  content: "";
  display: table;
  clear: both; /* Yüzmekte olan öğelerden sonra temizleme */
}