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

CSS Float — bu mövqe xüsusiyyəti olub, elementi konteynerinin bir tərəfinə (left və ya right) köçürür və bu, mətn və inline elementlərin onu əhatə etməsinə imkan verir. Element sənədin adi axımından çıxarılır, lakin hələ də dizaynın bir hissəsidir. Əvvəlcə çoxsütunlu dizaynlar yaratmaq və şəkilləri mətnlə əhatə etmək üçün istifadə olunurdu, lakin indi daha çevik və proqnozlaşdırıla bilən metodlar, məsələn, Flexbox və Grid, istifadə edilərək xüsusi tapşırıqları həll etmək üçün əsasən tətbiq olunur.

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

• none: Element adi axımda göstərilir (standart dəyər).
• left: Element konteynerin sol kənarına köçürülür.
• right: Element konteynerin sağ kənarına köçürülür.
• inherit: Valoğu valideyn elementdən miras alır.

İstifadə nümunəsi:

.image {
  float: left;
  margin-right: 15px; /* Sağda boşluq, mətn onu əhatə edir */
}

.text {
  /* Mətn `.image` sinfi olan elementi əhatə edəcək */
}

Float ilə bağlı problemlər:

• Axımdan çıxma (ətrafdakı elementin çökməsi): Yalnız float elementləri ehtiva edən valideyn element hündürlükdə çökmə edə bilər, çünki bu elementlər onun normal ölçülərinə daxil edilmir.
• Elementlərin üst-üstə düşməsi: Yaxın elementlər, ölçüləri nəzərə alınmadıqda, float elementinin üstünə çıxa bilər.

Problemlərin həlli:

• clear xüsusiyyəti: Float olmayan element üçün təyin edilir. Dəyərlər: left, right, both, none.
• Clearfix texnikası: Valideyn elementə xüsusi sinf əlavə etmək və ya pseudo-element :after istifadə etməklə valideynin çökməsini məcbur etmək.

.container::after {
  content: "";
  display: table; /* və ya block */
  clear: both;
}

• Müasir metodlar: Flexbox və ya CSS Grid istifadə edərək mürəkkəb düzənlər yaratmaq.

Float-lar müasir vebdə əsas layout vasitəsi olmasa da, onların necə işlədiyini başa düşmək köhnə kodların dəstəklənməsi və xüsusi tapşırıqları həll etmək üçün vacibdir, məsələn, şəkillərin mətnlə əhatə olunması.