CSS-də üzən elementlər (floats) nədir?

CSS-də float, elementin ətrafındakı məzmunun sol və ya sağ tərəfinə "üzməsinə" imkan verən bir xüsusiyyətdir.

Əsas xüsusiyyətlər:

• Hərəkət: Float tətbiq olunan element, valideyn konteynerinin sol və ya sağ kənarına hərəkət edir (və ya başqa float elementinə).
• Əhatə: Normal blok və ya inline məzmun (mətn, şəkillər) float elementini əhatə edir.
• Axın konteksti: Float elementləri qismən normal sənəd axışından çıxarır, lakin digər elementlərin yerləşdirilməsinə təsir edir.
• Tətbiq: Əvvəlcə sütunların təşkili və ya şəkillərin ətrafına mətn yerləşdirmək üçün istifadə olunurdu. Müasir dizaynda daha çox Flexbox və ya Grid istifadə olunur.

float xüsusiyyətinin tipik dəyərləri:

• left: Element sola üzür.
• right: Element sağa üzür.
• none: Element üzmür (standart dəyər).
• inherit: Valideynin dəyərini miras alır.
• initial: Standart dəyəri təyin edir.

Float ilə bağlı problemlər:

• Valideyn konteynerin çökməsi: Yalnız float elementləri ehtiva edən valideyn konteyner hündürlükdə çökmə edə bilər.
• Təmizləmə: Növbəti elementlərin float elementlərini əhatə etməsinin qarşısını almaq üçün clear xüsusiyyəti istifadə olunmalıdır.

.image-float {
  float: left; /* Şəkil sola üzür */
  margin-right: 10px; /* Şəkilin sağında boşluq */
}

.text-content {
  /* Bu mətn şəkli əhatə edəcək */
}

.clearfix::after {
  content: "";
  display: table;
  clear: both; /* Float elementlərdən sonra təmizləmə */
}