CSS-də yüzen elementlər (float) nədir?

CSS-də float (yüzen) elementləri, bir elementi sənədin normal axımından çıxararaq, konteynerinin sol və ya sağ tərəfinə yerləşdirməyə imkan verən bir xüsusiyyətdir. Yaxın elementlər və mətn bu yüzen elementi əhatə edəcək.

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

• left: Element sola yüzer.
• right: Element sağa yüzer.
• none: Element normal axımda qalır (standart dəyər).
• inherit: Valoqun atasından miras alınır.

İstifadə nümunələri:

.float-left {
  float: left; /* Element sola yüzer */
  margin-right: 10px; /* Mətn üçün sağa boşluq əlavə edir */
}

.float-right {
  float: right; /* Element sağa yüzer */
  margin-left: 10px; /* Mətn üçün sola boşluq əlavə edir */
}

Davranış xüsusiyyətləri:

• Yüzen element sənədin standart axımından çıxarılır, amma yanındakı elementlərin və mətnin yerləşməsinə təsir edir.
• Yüzen elementin valideyni "sıxıla" bilər, çünki yüzen uşaqlar onun hündürlüyünə təsir etmir. Bunu qarşısını almaq üçün clear və ya digər texnikalar, məsələn, overflow: hidden və ya Flexbox/Grid istifadə olunur.
• clear xüsusiyyəti, hansı tərəfdən yüzen elementlərin yerləşməməsini göstərə bilər:

  .clear-left {
    clear: left; /* Element, soldakı yüzen elementlərin altında yerləşəcək */
  }
  
  .clear-right {
    clear: right; /* Element, sağdakı yüzen elementlərin altında yerləşəcək */
  }
  
  .clear-both {
    clear: both; /* Element, hər iki tərəfdən yüzen elementlərin altında yerləşəcək */
  }
  

Tarixi olaraq, yüzen elementlər çoxpilləli dizaynlar yaratmaq üçün istifadə olunurdu, amma indi bu məqsəd üçün Flexbox və ya CSS Grid daha üstün və daha proqnozlaşdırılandır. Lakin, float hələ də şəkil və ya digər elementlərin ətrafında mətnin sarmalanması üçün faydalıdır.