9-dars

O'zing nomla

Bu darsda overflow va Block Formatting Context (BFC) tushunchalarini o'rganamiz.

1. overflow nimani o'zgartiradi?

🧠 overflow nima o'zi?

overflow — bu elementga shuni aytadi:

"Ichidagi narsa sig'may qolsa, tashqariga chiqaraymi, kesaymi yoki scroll beraymi?"

🔧 Asosiy qiymatlar

1️⃣ overflow: visible (default)

.box {
  overflow: visible;
}

👉 Natija:

• content tashqariga chiqib ketadi
• element chegarasi to'siq bo'lmaydi

🧠 Shuning uchun:

"Nega rasm div'dan chiqib ketdi?" — chunki visible.

2️⃣ overflow: hidden

.box {
  overflow: hidden;
}

👉 Natija:

• tashqariga chiqqan qism kesiladi
• ko'rinmaydi
• scroll yo'q

🧠 Ko'p ishlatiladi, lekin ehtiyot bo'l:

• content yo'qolishi mumkin

3️⃣ overflow: scroll

.box {
  overflow: scroll;
}

👉 Natija:

• har doim scroll bor
• content sig'sa ham

❌ UX jihatdan yomon

4️⃣ overflow: auto (eng sog'lom)

.box {
  overflow: auto;
}

👉 Natija:

• kerak bo'lsa → scroll chiqadi
• sig'sa → yo'q

✅ Amaliy loyihalarda eng to'g'ri tanlov

🔄 overflow-x va overflow-y

.box {
  overflow-x: hidden;
  overflow-y: auto;
}

👉 Foyda:

• gorizontalni yop
• vertikalni scroll qil

🧠 Ayniqsa mobile'da muhim.

❌ Eng ko'p uchraydigan xatolar

❌ overflow: hidden ni "hamma joyga" qo'yish → content yo'qoladi

❌ Scroll chiqmasin deb hidden qilish → accessibility buziladi

❌ Gorizontal scroll sababini tekshirmasdan yashirish → asl muammo qoladi

🧠 Qachon qaysi biri?

• Chiqib ketsin → visible
• Kesilsin → hidden
• Kerak bo'lsa scroll → auto
• Majburiy scroll → scroll

2. Block Formatting Context (BFC) nima?

🧠 BFC nima o'zi?

Block Formatting Context — bu brauzer ichida alohida layout hududi.

Oddiy qilib:

BFC — bu "ichki dunyo" ichidagi elementlar tashqariga aralashmaydi, tashqarisi ham ichkariga aralashmaydi.

🧱 BFC nimani hal qiladi?

Agar element BFC bo'lsa:

1️⃣ Ichidagi marginlar tashqariga collapse bo'lmaydi 2️⃣ Float qilingan elementlar parent'ni cho'ktirmaydi 3️⃣ Ichki layout barqaror bo'ladi 4️⃣ Tashqi elementlar ichkariga ta'sir qila olmaydi

🧠 Shu sabab BFC — layoutni "izolyatsiya" qilish usuli.

❓ Qachon BFC hosil bo'ladi?

Element BFC yaratadi, agar:

1️⃣ overflow visible dan boshqa bo'lsa

.parent {
  overflow: hidden;
}

yoki

.parent {
  overflow: auto;
}

2️⃣ display: flow-root bo'lsa (ENG TO'G'RI USUL)

.parent {
  display: flow-root;
}

Bu faqat BFC yaratadi, boshqa yon ta'siri yo'q.

3️⃣ display: flex yoki grid bo'lsa

.parent {
  display: flex;
}

👉 Flex/Grid konteyner avtomatik BFC.

4️⃣ position: absolute yoki fixed

.box {
  position: absolute;
}

👉 Ular ham BFC, lekin oqimdan chiqadi (shu sabab ehtiyot bo'lish kerak)

5️⃣ float qilingan element

.box {
  float: left;
}

👉 Float o'zi ham BFC.

🧨 Real muammo → Real yechim

❌ Muammo 1: Margin collapse (ota–bola)

.parent {
  background: lightgray;
}

.child {
  margin-top: 40px;
}

👉 Bola pastga tushmaydi, ota siljiydi 😵

✅ Yechim (BFC yaratamiz)

.parent {
  display: flow-root;
}

yoki:

.parent {
  overflow: hidden;
}

👉 Endi:

• bola ichkarida siljiydi
• collapse yo'q

❌ Muammo 2: Float parent'ni cho'ktiradi

.child {
  float: left;
}

👉 Parent height = 0 😬

✅ Yechim (BFC)

.parent {
  display: flow-root;
}

👉 Parent endi bolani "ko'radi".

⚠️ overflow: hidden bilan ehtiyot bo'l

Ha, u BFC yaratadi. Lekin:

• content kesilishi mumkin
• dropdown, tooltip yo'qoladi

🧠 Professional qoida

Layout uchun → flow-root Kesish uchun → overflow

📌 Xulosa

• overflow — content sig'masligini boshqaradi
• visible — chiqib ketadi (default)
• hidden — kesiladi
• auto — kerak bo'lsa scroll (eng yaxshi)
• scroll — har doim scroll
• BFC — layoutni izolyatsiya qiladi
• display: flow-root — BFC yaratishning eng to'g'ri usuli
• overflow: hidden ham BFC yaratadi, lekin content kesilishi mumkin