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

CSS-də üzən elementlər (floatlar) normal sənəd axımından çıxarılır və göstərilən istiqamətdə (sol və ya sağ) öz konteyner blokunun içində hərəkət edir. Yan-yana inline elementlər və məzmun, əks tərəfdən üzən elementi əhatə etməyə başlayır.

float-ın əsas xüsusiyyətləri:

left: Element sola hərəkət edir.
right: Element sağa hərəkət edir.
none: Element normal axımda qalır (standart dəyər).
inherit: Valoarını valideyndən miras alır.

Əvvəllər çox sütunlu düzənlər yaratmaq üçün istifadə olunurdu, Flexbox və Grid ortaya çıxmazdan əvvəl.

Davranış xüsusiyyətləri:

Üzən element blok halına çevrilir, ilkin göstərim növündən asılı olmayaraq.
Valideyn konteynerin hündürlüyü üzən elementin hündürlüyünü nəzərə almır, bu da konteynerin "çökməsinə" səbəb ola bilər. Bu problemi həll etmək üçün təmizləmə metodları istifadə olunur.

Təmizləmə metodları:

clear xüsusiyyəti: Elementin üzən elementlər tərəfindən əhatə olunmamasını təmin edir. Dəyərlər: left, right, both, none, inherit.
```
/* Element hər iki tərəfdən üzən elementlər tərəfindən əhatə olunmayacaq */
.clear-both {
  clear: both;
}
```
Clearfix texnikası: Üst konteynerə :after pseudo-element əlavə etməklə, clear: both və digər stillərlə, çökmənin qarşısını almaq.
```
/* klassik clearfix */
.clearfix::after {
  content: "";
  display: table; /* və ya "block" */
  clear: both;
}
```

Müasir layout metodlarının ortaya çıxmasına baxmayaraq, float hələ də kiçik elementlər üçün faydalı ola bilər, məsələn, mətn içində şəkil yerləşdirmək üçün.

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