Qaysi oqimni to'xtatish usullari (clearing) bilasiz va ular qayerda qo'llaniladi?

• clear: both;: Eng keng keng usul va ishonchli usul. Oldin joylashgan barcha suzilgan elementlarning ostiga joylashishi kerak bo'lgan elementga qo'llaniladi. Bu alohida bo'sh element yoki maket elementi bo'lishi mumkin.
• clear: both; bilan bo'sh element qo'shish: Ba'zan, ayniqsa murakkab maketlar bilan ishlashda, oqimni garantilash uchun ishlatiladi. Bu bo'sh div yoki boshqa blok element bo'lishi mumkin.
• :after pseudo-element bilan clear: both;: Zamonaviyroq yondashuv. Bu suzilgan elementlar konteyneriga qo'llaniladi. Konteynerning oxirgi mazmunidan keyin "virtual" element yaratadi, shunday qilib ichki oqimini tozalaydi.

/* :after pseudo-elementdan foydalanish misoli */
.container::after {
  content: ""; /* Pseudo-elementlar uchun majburiy xususiyat */
  display: table; /* Ko'pincha yaxshiroq moslik uchun ishlatiladi */
  clear: both;
}

• overflow: hidden; yoki overflow: auto;: Suzilgan elementlar konteyneriga qo'llaniladi. Yangi blok formatlash kontekstini yaratadi, bu ichki oqimini "tozalash". Biroq, bu mazmunni kesib qo'yishi yoki skroll panelini yaratishi mumkin, agar mazmun konteyner chegaralaridan chiqib ketadigan bo'lsa.
• Blok formatlash konteksti (BFC): Yuqoridagi barcha usullar, aniq bo'sh elementdan tashqari, qandaydir tarzda yangi BFC yaratadi, bu oqimini tozalashga olib keladi. BFC yaratadigan xususiyatlar:
  • float (nol yoki undan katta qiymat)
  • overflow (visibledan boshqa qiymat)
  • display: inline-block
  • position: absolute yoki fixed
  • display: flow-root; (yangi, aniq BFC yaratadi)

Usullar taqqoslash jadvali:

Usul	Qanday elementga	Oqimini tozalash usuli	Potensial muammolar
clear: both;	Element	Aniq tozalash	Qo'shimcha element
Bo'sh element + clear	Bo'sh element	Aniq tozalash	Qo'shimcha element
:after + clear	Konteyner	Pseudo-element	Boshlang'ichlar uchun qiyinroq tushuniladi
overflow: hidden/auto;	Konteyner	BFC yaratish	Kesish / skroll paneli
Boshqa xususiyat bilan BFC yaratish	Konteyner	BFC yaratish	Niyatli bo'lmagan, yon ta'sirlar
display: flow-root;	Konteyner	Aniq BFC yaratish	Eski brauzerlarda cheklangan qo'llab-quvvatlash

Qo'llanadigan joylar:

• Suzilgan elementlardan keyin keladigan element ularning ostida ko'rsatilishini ta'minlash uchun.
• Faqat suzilgan elementlarni o'z ichiga olgan konteyner balandlikka tushmasligi uchun.
• Murakkab maketlarda hujjat oqimini suzilgan elementlar atrofida boshqarish uchun.