Qaysi oqimni tozalash usullari (clearing) bilasiz va qaysi vaziyatlarda qo'llaniladi?

• overflow: hidden; yoki overflow: auto;: Bu float bilan bo'lgan element(lar)ning ota-ona elementiga qo'llaniladi. Yangi blok formatlash kontekstini (BFC) yaratadi, shuning uchun ota-ona atrofdagi elementlarni o'z balandligiga kiritadi.

Vaziyat: Element chegaralaridan tashqariga chiqadigan mazmunni yashirish yoki skrollni qo'llash uchun eng oddiy usul, lekin u tozalash usuli sifatida ham ishlaydi.

• clear: both;: Bu float bilan o'ralgan oldingi elementlarni o'z ichiga olmaydigan elementga qo'llaniladi. Bu element barcha atrofdagi elementlarning ostida joylashadi.

Vaziyat: Bir-birini o'rab olgan elementlardan keyin yangi satr yoki bo'lim yaratish kerak bo'lsa.

• clearfix usuli (pseudo-elementlar ::after): Maxsus xususiyatlarga ega pseudo-element qo'shadi, clear: both; xatti-harakatini taklif qiladi, ammo qo'shimcha HTML elementlarini qo'shishga hojat qolmaydi.

.clearfix::after {
    content: ""; /* Pseudo-elementni ko'rsatish uchun majburiy mazmun */
    display: table; /* Yangi blok kontekstini yaratadi, overflow: hidden; kabi */
    clear: both; /* Tozalashni qo'llash */
}

Vaziyat: Eng keng tarqalgan va tavsiya etilgan tozalash usuli, toza va markup tuzilishini buzmaydi. Atrofdagi elementlarni o'z ichiga olgan ota-ona elementga qo'llaniladi.

• display: flex yoki display: grid dan foydalanish: Zamonaviy maket usullari, ular elementlarni joylashtirish uchun o'ralishni talab qilmaydi, shuning uchun tozalashga ehtiyoj qolmaydi. Vaziyat: Murakkab maketlar qurishda yoki elementlarning joylashishini yanada moslashuvchan qilishda.

• clear: both; bilan qo'shimcha element qo'shish (eski usul): Bo'yalgan elementdan keyin bo'sh HTML element qo'siladi va unga clear: both; qo'llaniladi. Vaziyat: Bu usul eskirgan va istalmagan deb hisoblanadi, chunki ortiqcha HTML qo'shiladi.