CSS'da suzilgan elementlar (floats) qanday ishlaydi…

CSS'dagi suzuvchi elementlar (floatlar) odatdagi hujjat oqimidan chiqariladi va belgilangan yo'nalishda (chap yoki o'ng) o'zining qamrov blok ichida siljiydi. Yonma-yon satr elementlari va mazmun suzuvchi elementni qarama-qarshi tomondan o'rab boshlaydi.

float ning asosiy xususiyatlari:

left: Element chapga siljiydi.
right: Element o'ngga siljiydi.
none: Element odatdagi oqimda qoladi (standart qiymat).
inherit: Ota-ona qiymatini meros oladi.

Ular ko'pincha Flexbox va Grid paydo bo'lishidan oldin ko'p ustunli maketlar yaratishda ishlatilgan.

Xususiyatlar:

Suzuvchi element blokga aylanadi, asl ko'rsatish turidan qat'i nazar.
Ota konteynerning balandligi suzuvchi elementning balandligini hisobga olmaydi, bu konteynerning "yig'ilishiga" olib kelishi mumkin. Bu muammoni hal qilish uchun tozalash usullari qo'llaniladi.

Tozalash usullari:

clear xususiyati: Suzuvchi elementlar tomonidan o'ralmasligini ta'minlash uchun qo'llaniladi. Qiymatlar: left, right, both, none, inherit.
```
/* Element har ikkala tomonidagi suzuvchi elementlar bilan o'ralmasligi uchun */
.clear-both {
  clear: both;
}
```
Clearfix texnikasi: Ota konteynerga :after pseudo-element qo'shish bilan, clear: both va boshqa uslublar bilan, yig'ilish oldini olish.
```
/* klassik clearfix */
.clearfix::after {
  content: "";
  display: table; /* yoki "block" */
  clear: both;
}
```

Yangi usullar paydo bo'lishiga qaramay, float hali ham kichik elementlar uchun foydali bo'lishi mumkin, masalan, matn ichida rasm joylashtirish uchun.

CSS'da suzilgan elementlar (floats) qanday ishlaydi?