Qaysi to'siq usullari (clearing)ni bilasiz va qaysi vaziyatlarda qo'llaniladi?

Fluxni to'siq qilish usullari:

• clear: left; — chap tomonda oqishni to'sadi. Element chap tomonda oqib kelayotgan elementlar bilan yonma-yon bo'lishi kerak bo'lmagan holatda qo'llaniladi.
• clear: right; — o'ng tomonda oqishni to'sadi. Element o'ng tomonda oqib kelayotgan elementlar bilan yonma-yon bo'lishi kerak bo'lmagan holatda qo'llaniladi.
• clear: both; — har ikkala tomondan oqishni to'sadi. Element har qanday oqib kelayotgan elementlar bilan yonma-yon bo'lmasligi kerak bo'lsa, qo'llaniladi. Bu eng keng tarqalgan variant.
• clear: none; (standart qiymat) — oqishga ruxsat beradi.

Qo'llanilishi:

• Ota konteynerining "qisqarishini" oldini olish uchun: Agar ota elementning barcha bolalar elementlari (float bo'lganlar) bir-biriga oqib ketsa, ota konteynerning balandligi yo'qoladi va qisqaradi. Ota ichidagi oqib kelayotgan elementlardan so'ng clear: both; bilan element qo'shish yoki ::after pseudo-elementidan foydalanish bu muammoni hal qiladi.
• Oqib kelayotgan elementlardan keyin to'g'ri joylashishni ta'minlash uchun: Agar oddiy (oqib kelmaydigan) elementlar oqib kelayotganlardan pastda joylashishi kerak bo'lsa, va yonma-yon bo'lmasligi kerak bo'lsa.
• Oqib kelayotgan maketlarda "qatorlar" yoki "satrlar" yaratish uchun: Oqib kelayotgan elementlar bir nechta qatorlarga bo'linishi kerak bo'lsa, clear yangi qatorni boshlash uchun ishlatiladi.

Pseudo-element ::after yordamida tozalash misoli:

.clearfix::after {
  content: ""; /* Pseudo-elementni ko'rsatish uchun muhim */
  display: table; /* Yoki block */
  clear: both; /* Asosiy xususiyat tozalash uchun */
}

Ushbu clearfix sinfi, oqib kelayotgan bolalar elementlarini o'z ichiga olgan ota elementga qo'llanadi.