CSS-də üzən elementlər (floats) necə işləyir?

float elementi sənədlərin adiən axınından çıxarır və digər elementlərin (adətən mətn və ya inline elementlər) onun ətrafında yerləşməsinə imkan verir (left, right).

Əsas prinsiplər:

• Axından çıxarılması: float ilə olan element sənədin adi axınında yer tutmur.
• Ətrafında yerləşdirmə: Yaxın blok elementləri float elementinin yerini tutmayacaq və onların məzmunu (inline elementlər) göstərilən tərəfdən ətrafında yerləşəcək.
• Valideynə təsiri: Yalnız float elementləri ehtiva edən valideyn konteynerin hündürlüyü sıxlaşa bilər və onların hündürlüyü nəzərə alınmaya bilər.
• clear: clear xüsusiyyəti (left, right, both) float elementindən sonra gələn elementlərin onun ətrafında yerləşməsini qarşısını almaq üçün istifadə olunur.

Nümunə:

.image {
  float: left; /* Şəkil sola çəkilir */
  margin-right: 10px; /* Mətn üçün sağa boşluq əlavə edilir */
}

.text {
  /* Mətn şəkili əhatə edəcək */
}

Tövsiyələr:

• float istifadəsi mürəkkəb düzənlər yaratmaq üçün artıq köhnəlib və Flexbox və ya Grid ilə əvəz olunub.
• float hələ də şəkillərlə mətnin ətrafında effekt yaratmaq üçün istifadə oluna bilər.
• float istifadə edilərkən valideyn konteynerin çökməsinin qarşısını almaq üçün "clearfix" və ya overflow: hidden/auto texnikaları tətbiq edilir.