CSS normal oqim, formatting context va float

Qisqacha: Normal oqim — CSS hech narsa demaganda elementlar joylashadigan qoida: bloklar tepadan pastga, matn esa chapdan o'ngga, qator-qator. BFC (block formatting context) — margin'lar va float'larni tashqariga chiqarmaydigan alohida "xona"; uni eng toza yo'l bilan display: flow-root yaratadi. float bugun bitta ish uchun kerak — matnni rasm atrofida o'rash.

Bu darsda

• Normal oqimning ikki yo'nalishini — block va inline oqimni — tushuntira olasiz.
• Anonim qutilar va qator qutilari qayerdan paydo bo'lishini bilasiz.
• BFC nima, uni nima yaratadi va uning uchta ta'sirini aytib bera olasiz.
• float va clear bilan matnni rasm atrofida o'raysiz, shape-outside bilan esa doira bo'ylab.
• Eski kodda clearfix'ni tanib olasiz va uning o'rniga nima yozishni bilasiz.

Oldin bilishingiz kerak: Margin sirlari, display va yashirish, Overflow, Rasm va media, Qator balandligi.

1. Nega bu kerak?

HTML qismida hali birorta CSS qatori yo'q edi, lekin sahifa tartibsiz emasdi: sarlavhalar tepadan pastga terildi, so'zlar esa chapdan o'ngga, qator-qator oqdi. Buni brauzer o'zi qildi. Bu tartibning nomi — normal oqim (normal flow).

Keyingi darslardagi position, Flexbox va Grid shu oqimni o'zgartiradi. Oqimni bilmagan odam uchun ular "sehr" bo'lib qoladi: nega bu element boshqasining ustiga chiqdi, nega ota balandligini yo'qotdi?

Oldingi darslarda ikkita savol ochiq qolgan edi:

• Margin sirlari va display darslarida display: flow-root otani alohida "xona"ga aylantirishini ko'rdik. Bu "xona" nima va yana nima uni yaratadi?
• O'sha yerda "rasmni matn o'rab turadigan eski float" tilga olingan edi. U nima?

Amaliy vazifa ham bor: Jasur aka menyuga "Kun taomi" blokini qo'shmoqchi — chapda bir lagan osh, matn esa uni gazetadagidek aylanib o'tsin. Buni float qiladi.

2. Normal oqim

2.1 Ikki yo'nalish

Daftarga yozishni eslang. Har qatorda so'zlar chapdan o'ngga ketadi. Qator to'lsa, keyingi qatorga tushasiz. Qatorlar esa tepadan pastga teriladi. Normal oqim ham aynan shunday, faqat ikki "qavat"da:

• Block oqim — blok elementlar (h1, p, section, ul) bir-birining ostiga, tepadan pastga teriladi. Har biri otasining butun enini oladi. Ular orasidagi vertikal margin'lar qo'shilishi mumkin (Margin sirlari).
• Inline oqim — blok ichidagi matn va satr ichidagi elementlar (a, strong, span, img) chapdan o'ngga, qator-qator oqadi.

<style>
  * {
    outline: 1px dashed #b4461a;
  }
</style>
<h2>Choyxona «Bahor»</h2>
<p>Bugun <strong>osh</strong> va <a href="menyu/">manti</a>
tayyor. Har kuni 7:00 dan 23:00 gacha ochiqmiz.</p>
<ul>
  <li>Osh — 35 000 so'm</li>
  <li>Manti — 30 000 so'm</li>
</ul>

Nimaga qarang: sarlavha, paragraf va ro'yxatning to'rtburchaklari butun enga cho'zilgan va bir-birining ostida turibdi — bu block oqim. Satr ichidagi strong va a ning ramkalari esa faqat so'z atrofida, matn qatorining ichida — bu inline oqim. * { outline } hiylasini Asosiy selektorlar darsida ko'rgan edik.

"Chapdan o'ngga" — o'zbek matni uchun. Arab tilida qatorlar o'ngdan chapga yoziladi: oqim yo'nalishini yozuv tili belgilaydi (Mantiqiy xususiyatlar darsida ko'ramiz).

2.2 Anonim qutilar

Bitta blok ichida matn va boshqa blok aralashib qolsa-chi?

<style>
  div {
    padding: 4px;
    border: 2px solid #2f6b3a;
  }
  p {
    margin: 4px 0;
    background-color: #d8ecd9;
  }
</style>
<div>
  Bugun menyuda:
  <p>Osh — 35 000 so'm</p>
  Ertaga — manti.
</div>

Nimaga qarang: "Bugun menyuda:" va "Ertaga — manti." har biri o'z qatorida, paragraf bilan yonma-yon emas. Brauzer blok ichida blok va "yalang'och" matnni aralashtirmaydi. U matnni ko'rinmas blok qutiga o'raydi. Bunday quti anonim quti (anonymous box) deyiladi — HTML'da tegi yo'q, lekin brauzer uni chizadi.

Anonim qutini CSS bilan tanlab bo'lmaydi: uning selektori yo'q. U o'z ko'rinishini otasidan meros oladi (Meros). Shuning uchun qoida: matnni doim ma'noli tegga o'rang — p, h3 yoki span. Shunda har bo'lagini alohida bezay olasiz.

2.3 Oqimdan chiqish

Ba'zi elementlar normal oqimdan chiqariladi: qolgan elementlar ularni "ko'rmaydi" va joylashayotganda hisobga olmaydi. Buni uch narsa qiladi:

Flexbox va Grid esa oqimni boshqacha usulda almashtiradi: ular bolalarni butunlay yangi qoidalar bilan teradi (Flexbox'ga kirish).

Tekshirib ko'ring: section ichida avval matn, keyin h3 keldi. Matnni section ga berilgan color bo'yaydimi?

3. Formatting context: joylash qoidalari to'plami

3.1 Ikki xil "xona"

Joylash muhiti (formatting context) — bir guruh qutilar qaysi qoida bilan joylashishini belgilaydigan muhit. Choyxona zalini tasavvur qiling. Zalda stollar qator qilib qo'yilgan — bu zalning qoidasi. Oshxonada esa qozonlar boshqa qoida bilan turadi. Har xona o'z tartibida yashaydi.

Normal oqimda ikki xil muhit bor:

• Blok muhiti (block formatting context, BFC) — bloklar tepadan pastga teriladigan muhit.
• Qator muhiti (inline formatting context, IFC) — matn va satr ichidagi elementlar qator-qator teriladigan muhit. Faqat satr ichidagi bolalari bor har blok (masalan, p) o'z ichida shunday muhit yaratadi.

Keyinroq yana ikkitasini ko'rasiz — flex va grid muhitlari. Hozircha shu ikkitasi yetarli.

3.2 Qator qutisi

IFC ichida brauzer har qator uchun ko'rinmas to'rtburchak quradi — qator qutisi (line box). So'zlar shu qutiga teriladi. Qator to'lsa, yangi qator qutisi ochiladi. Qutining balandligi line-height dan (Qator balandligi) va shu qatordagi eng baland elementdan hisoblanadi.

display darsidagi ikki sirni endi tushuntira olamiz. Satr ichidagi elementning tepa-past padding'i qatorlarni surmaydi — u qator qutisining balandligiga qo'shilmaydi. inline-block esa yaxlit to'rtburchak, u qator qutisini o'z bo'yigacha kengaytiradi:

<style>
  p {
    width: 18rem;
    line-height: 1.5;
    background-color: #fffaf0;
  }
  .yangi {
    padding: 0.5em 0.75em;
    background-color: #b4461a;
    color: #fffaf0;
  }
  p + p .yangi {
    display: inline-block;
  }
</style>
<p>Menyuga <span class="yangi">Yangi!</span> taom qo'shildi:
tandir go'sht. Har juma kuni tushlikda tayyor bo'ladi.</p>
<p>Menyuga <span class="yangi">Yangi!</span> taom qo'shildi:
tandir go'sht. Har juma kuni tushlikda tayyor bo'ladi.</p>

Nimaga qarang: birinchi paragrafda qizg'ish fon yuqori va pastki qatorga tegib turibdi, qatorlar esa bir xil masofada. Ikkinchisida birinchi qator pastga kengaydi — inline-block o'z qator qutisini balandroq qildi. Chrome'da o'lchadik: birinchi paragraf 72 piksel (uch qator, har biri 24), ikkinchisi — 88. Bu yerdagi yangi — faqat misol uchun span; «Bahor» saytida bu class kartaga qo'yiladi (keyingi darsda).

3.3 text-align qator ichini tekislaydi

text-align blokni emas, uning qator qutilari ichidagi narsalarni tekislaydi. Shuning uchun u otaga yoziladi:

• p { text-align: center; } — paragraf ichidagi matn va satr ichidagi img o'rtaga keladi.
• img { text-align: center; } — hech narsa bermaydi (Chrome'da tekshirdik). Rasmning ichida qator yo'q — tekislaydigan narsa yo'q.

Yana bir nozik joy: Rasm va media darsidagi reset rasmga display: block beradi. Blok qatorda turmaydi, shuning uchun otadagi text-align: center uni markazlamaydi. Blokni markazlash — margin-inline: auto (Margin sirlari).

Tekshirib ko'ring: figure ichidagi rasm display: block bilan. Stajyor figure { text-align: center; } yozdi. Nima o'rtaga keladi, nima kelmaydi?

4. Block formatting context (BFC)

4.1 Uchta ta'sir

Sahifaning ildizi — html — birinchi BFC'ni yaratadi. Sahifadagi hamma bloklar shu "katta zal"da teriladi. Lekin ba'zi elementlar o'z ichida yangi BFC ochadi. Yangi BFC — yopiq xona: ichidagi narsa tashqariga ta'sir qilmaydi, tashqaridagi narsa ichkariga kirmaydi.

Amalda bu uchta natija beradi:

1. Margin'lar chiqmaydi. Birinchi bolaning tepa margin'i xonadan tashqariga "oqib" chiqmaydi va ota bilan qo'shilmaydi. Margin sirlari darsidagi karta muammosi shu edi.
2. Float'lar ichida qoladi. Xona o'z ichidagi float'larni balandligiga qo'shadi. Buni float bo'limida ko'rasiz.
3. Xona float bilan ustma-ust tushmaydi. Yonida float bo'lsa, BFC qutisi uning tagiga kirmaydi — torayib, yonida turadi.

flowchart TD
  A["html — birinchi BFC"] --> B["h1, p, section ..."]
  A --> C["Karta: display: flow-root<br/>— yangi BFC"]
  C --> D["1. Margin chiqmaydi"]
  C --> E["2. Float ichida qoladi"]
  C --> F["3. Float ostiga kirmaydi"]

Nimaga qarang: oddiy bloklar html ning umumiy "zali"da qoladi. Karta esa o'z xonasini ochdi va uchta ta'sir faqat shu xonaga tegishli.

4.2 BFC'ni nima yaratadi

Ro'yxat uzun, lekin ko'pini yodlash shart emas. Amalda sizga bittasi kerak: display: flow-root. U faqat bitta ish qiladi — yangi BFC ochadi. Boshqa hech narsani o'zgartirmaydi.

4.3 overflow: clip — BFC yaratmaydi

Overflow darsida hidden va clip ko'rinishda bir xil edi. Lekin BFC masalasida ular farq qiladi. Uchta kartani solishtiramiz — sarlavhasining tepa margin'i 32 piksel:

<style>
  :root {
    --rang-fon: #fffaf0;
  }
  body {
    background-color: #fde2c4;
  }
  .taom-karta {
    margin-bottom: 1rem;
    background-color: var(--rang-fon);
  }
  .taom-karta h3 {
    margin: 32px 0 0;
  }
  .a { overflow: hidden; }
  .b { overflow: clip; }
  .c { display: flow-root; }
</style>
<article class="taom-karta a"><h3>Osh — hidden</h3></article>
<article class="taom-karta b"><h3>Manti — clip</h3></article>
<article class="taom-karta c"><h3>Lag'mon — flow-root</h3></article>

Nimaga qarang: birinchi va uchinchi kartada sarlavha ustida qaymoq joy bor — margin karta ichida qoldi. O'rtadagi clip kartada esa qaymoq fon sarlavhaning tepasidan boshlanadi — margin tashqariga chiqib ketdi. Chrome'da o'lchadik: hidden va flow-root kartalarida sarlavha karta tepasidan 32 piksel pastda, clip da — 0. a, b, c — faqat taqqoslash uchun nomlar.

Sababi — Overflow darsidagi farq: hidden skroll konteyner yaratadi, clip — yo'q. Spetsifikatsiya ham shunday yozadi: clip yangi formatting context ochmaydi. Float bilan ham xuddi shunday: Chrome'da tekshirdik, overflow: clip li ota ichidagi float'ni o'rab olmadi, hidden li ota esa o'rab oldi.

Xulosa: margin yoki float'ni "ushlash" kerak bo'lsa — flow-root. overflow: hidden ham ishlaydi, lekin kartadan chiqib turgan "Yangi!" belgisi, soya yoki fokus halqasini ham kesadi (Overflow darsidagi xatolardan biri).

Tekshirib ko'ring: Karta ichidagi h3 ning margin'i kartadan tashqariga chiqyapti. Stajyor kartaga overflow: clip berdi — hech narsa o'zgarmadi. Nega va qanday tuzatiladi?

5. float: matnni rasm atrofida o'rash

5.1 Qisqa tarix

float 1996-yildagi birinchi CSS'da paydo bo'lgan. Maqsadi — gazetadagidek rasmni chetga qo'yib, matnni uning atrofida oqizish. Keyin 15 yilcha dasturchilar undan butun sahifa layout'ini (ustunlar, menyu, kartalar to'ri) qurishdi. Bu yamoq edi: float bunga mo'ljallanmagan, ko'p hiyla kerak bo'lardi.

Bugun layout uchun Flexbox va Grid bor, float esa asl ishiga qaytdi. Yangi kodda uni faqat matn o'rash uchun yozing.

5.2 Birinchi float

Float — elementni otasining chap yoki o'ng chetiga "suzdirib" qo'yadigan xususiyat. Qiymatlari: left, right, none (odatiy). Qolgan matn uning yonidan oqib o'tadi:

<style>
  .kun-taomi {
    max-width: 22rem;
  }
  .lagan {
    float: left;
    width: 120px;
    height: 120px;
    margin: 0 1rem 0.5rem 0;
  }
  .kun-taomi p {
    background-color: #d8ecd9;
  }
</style>
<article class="kun-taomi">
  <h3>Kun taomi: to'y oshi</h3>
  <svg class="lagan" viewBox="0 0 100 100" role="img"
       aria-label="Bir lagan osh">
    <circle cx="50" cy="50" r="48" fill="#2f6b3a" />
    <circle cx="50" cy="50" r="38" fill="#e9b949" />
    <circle cx="42" cy="45" r="6" fill="#b4461a" />
    <circle cx="58" cy="56" r="5" fill="#b4461a" />
  </svg>
  <p>Rustam aka to'y oshini tongda, katta qozonda damlaydi.
  Guruch — devzira, go'sht — yangi so'yilgan qo'y. Oshga
  bedana tuxumi va qazi qo'shiladi. Bir lagan to'rt kishiga
  yetadi. Osh har kuni soat 11:00 da tayyor bo'ladi va
  odatda tushgacha tugaydi. Narxi — 45 000 so'm.</p>
</article>

Nimaga qarang: lagan chapda, matn uning o'ng tomonidan oqib o'tdi, rasm tugagach esa chap chetga qaytdi. Endi paragrafning yashil foniga qarang: u lagan ostidan chap chetgacha boradi. Paragraf qutisi float'ni ko'rmaydi — faqat uning ichidagi qatorlar qisqardi.

Mana float ning asosiy qoidasi: float bloklar uchun oqimdan chiqadi, lekin matn uchun chiqmaydi. Qator qutilari float yonida qisqaradi, blok qutisi esa joyida qoladi. Misoldagi kun-taomi va lagan — shu misol uchun nomlar, «Bahor» ro'yxatida yo'q. SVG ichidagi doiralar — oddiy chizma, role="img" va aria-label uni Malikaga "Bir lagan osh" deb o'qitadi (SVG HTML ichida).

Float haqida yana ikki fakt:

• Float'ga en bering. Ensiz float o'z mazmuni enini oladi: uzun matnli float butun qatorni egallab, o'rash ma'nosini yo'qotadi.
• Float har doim blokka aylanadi. Chrome'da tekshirdik: float: right berilgan span ning hisoblangan display qiymati — block. Unga width va vertikal margin ishlaydi.

5.3 Ota balandligini yo'qotadi

Float'ning eng mashhur tuzog'i. Karta ichida faqat float bo'lsa, karta uni "ko'rmaydi":

<style>
  .kun-taomi {
    max-width: 30rem;
    margin-bottom: 1rem;
    border: 2px solid #2f6b3a;
  }
  .lagan {
    float: left;
    width: 80px;
    height: 80px;
    margin-right: 1rem;
  }
  .kun-taomi + .kun-taomi {
    display: flow-root;
  }
</style>
<article class="kun-taomi">
  <svg class="lagan" viewBox="0 0 100 100" role="img"
       aria-label="Bir lagan osh">
    <circle cx="50" cy="50" r="48" fill="#e9b949" />
  </svg>
  <strong>❌ Kun taomi</strong>
</article>
<article class="kun-taomi">
  <svg class="lagan" viewBox="0 0 100 100" role="img"
       aria-label="Bir lagan osh">
    <circle cx="50" cy="50" r="48" fill="#e9b949" />
  </svg>
  <strong>✅ Kun taomi</strong>
</article>

Nimaga qarang: birinchi kartaning yashil chegarasi faqat bitta qator matnni o'raydi, lagan esa chegaradan pastga chiqib ketgan. Ikkinchi karta lagan bilan birga o'sdi. Chrome'da o'lchadik: birinchi karta 25 piksel baland (bir qator matn va chegaralar), ikkinchisi — 84 (80 piksellik lagan va chegaralar). Ikkinchi kartaga display: flow-root yozilgan — bu BFC'ning ikkinchi ta'siri: xona o'z float'larini ichida saqlaydi.

5.4 Clearfix — tarix uchun

flow-root 2020-yilgacha hamma brauzerda yo'q edi (Baseline ma'lumotiga ko'ra, 2020-yil yanvaridan beri hamma asosiy brauzerda bor). Undan oldin dasturchilar shu hiylani yozardi:

/* ESKI KOD: clearfix — bugun kerak emas */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Otaning oxiriga bo'sh pseudo-element (Pseudo-elementlar) qo'shiladi va u barcha float'lar ostiga tushiriladi. Ota o'sha pseudo-elementgacha cho'ziladi. Eski loyihalarda uni hali ham uchratasiz. Tanib oling, lekin yangi kodda yozmang: bitta display: flow-root xuddi shu ishni qiladi.

5.5 clear: float ostidan boshlash

"Kun taomi" ostida "Narxlar" sarlavhasi bor. Matn qisqa bo'lsa, sarlavha ham lagan yonida qolib ketadi. Bizga esa u rasm tugagandan keyin, yangi qatordan boshlanishi kerak. Buni clear qiladi: "mendan oldingi float'lar yonida turmayman, ularning ostiga tushaman".

.kun-taomi h3 {
  clear: both;
}

clear faqat shu BFC ichidagi float'larni hisobga oladi. Boshqa "xona"dagi float unga ta'sir qilmaydi.

5.6 Float yonidagi BFC

Uchinchi ta'sirni ko'ramiz. «Birinchi float» misolida paragraf foni lagan ostiga kirib ketgan edi. Paragrafga display: flow-root bersak-chi?

<style>
  .kun-taomi {
    max-width: 30rem;
  }
  .lagan {
    float: left;
    width: 80px;
    height: 80px;
    margin-right: 1rem;
  }
  .kun-taomi p {
    margin: 0 0 0.5rem;
    background-color: #d8ecd9;
  }
  .kun-taomi p + p {
    display: flow-root;
  }
</style>
<article class="kun-taomi">
  <svg class="lagan" viewBox="0 0 100 100" role="img"
       aria-label="Bir lagan osh">
    <circle cx="50" cy="50" r="48" fill="#e9b949" />
  </svg>
  <p>Oddiy paragraf: foni lagan ostidan o'tadi.</p>
  <p>flow-root paragraf: u lagan yonida alohida ustun bo'lib
  turadi. Matn uzaysa ham, lagan ostiga qaytmaydi — u o'z
  qutisida qoladi va pastga qarab o'sadi.</p>
</article>

Nimaga qarang: birinchi paragrafning yashil foni chap chetdan boshlanadi — lagan uning ustida. Ikkinchi paragraf lagan yonida torayib, alohida ustun bo'ldi: foni ham, matni ham lagan chetidan boshlanadi. Matn rasm ostiga qaytmadi.

Bu "rasm chapda, matn o'ngda ustun bo'lib" degan naqsh. Bugun uni ko'pincha Flexbox bilan yozishadi (Flex naqshlari).

Tekshirib ko'ring: Rasm float: left, uning ostidan keladigan ul ning belgilari (nuqtalari) rasm ustiga chiqib qolyapti. Nega va qanday tuzatiladi?

6. shape-outside: doira bo'ylab o'rash

6.1 To'rtburchakdan doiraga

Lagan — yumaloq. Lekin matn uni to'rtburchak kabi aylanib o'tdi: doiraning burchaklarida bo'sh oq joylar qoldi. Float doim to'rtburchak — uning margin qutisi. shape-outside matnga boshqa shaklni beradi:

<style>
  .kun-taomi {
    max-width: 24rem;
  }
  .lagan {
    float: left;
    width: 160px;
    height: 160px;
    shape-outside: circle();
    shape-margin: 0.75rem;
  }
</style>
<article class="kun-taomi">
  <svg class="lagan" viewBox="0 0 100 100" role="img"
       aria-label="Bir lagan osh">
    <circle cx="50" cy="50" r="48" fill="#2f6b3a" />
    <circle cx="50" cy="50" r="38" fill="#e9b949" />
    <circle cx="42" cy="45" r="6" fill="#b4461a" />
    <circle cx="58" cy="56" r="5" fill="#b4461a" />
  </svg>
  <p>Rustam aka to'y oshini tongda, katta qozonda damlaydi.
  Guruch — devzira, go'sht — yangi so'yilgan qo'y. Oshga
  bedana tuxumi va qazi qo'shiladi. Bir lagan to'rt kishiga
  yetadi. Choyxonada osh har kuni soat 11:00 da tayyor
  bo'ladi va odatda tushgacha tugaydi — oldindan stol band
  qilishni unutmang. Oshning yoniga achchiq-chuchuk salat
  va ko'k choy tavsiya qilamiz. Katta davra uchun butun
  qozonni ham buyurtma qilsa bo'ladi: bir kun oldin
  qo'ng'iroq qiling, Rustam aka o'zi maslahat beradi.</p>
</article>

Nimaga qarang: qatorlar lagan chetini kuzatib boradi — tepada va pastda matn doiraga yaqinlashdi, o'rtada esa uzoqlashdi. Matn bilan lagan orasida bir tekis bo'shliq bor.

• shape-outside: circle() — o'rash shakli: markazi o'rtada, radiusi eng yaqin chetgacha. Kvadrat lagan uchun bu — enining yarmi. Xuddi shuni circle(50%) deb ham yozishadi.
• shape-margin — shakl atrofidagi bo'shliq. Oddiy margin doira bo'ylab emas, to'rtburchak bo'ylab ishlaydi — shuning uchun bu yerda margin yo'q.

Ikki shart bor: shape-outside faqat float'ga ishlaydi, float'ning esa aniq o'lchami bo'lishi kerak. U faqat matn oqimini o'zgartiradi. Rasmning o'zini doira qilib kesish — boshqa ish: border-radius: 50% (Chegara va burchak) yoki clip-path (clip-path va maskalar).

6.2 Boshqa shakllar

url() bilan brauzer shaklni rasmning o'zidan oladi: shaffof piksellar "bo'sh", qolgani — shakl. Rasm boshqa saytdan bo'lsa, o'sha sayt maxsus ruxsat (CORS) bermasa, shakl ishlamaydi — bu ruxsatni Origin va Same-Origin Policy darsida o'rganamiz, hozir bilish shart emas.

Baseline ma'lumotlariga ko'ra, shape-outside 2020-yil yanvaridan hamma asosiy brauzerda bor. Eski brauzer uni tushunmasa, matn oddiy to'rtburchak bo'ylab o'raladi — sahifa buzilmaydi. path() qiymati esa hali Baseline emas, uni ishlatmang.

Tekshirib ko'ring: Stajyor rasmga shape-outside: circle() yozdi, lekin matn baribir to'rtburchak bo'ylab o'ralyapti. Rasmda float yo'q. Muammo nimada?

7. Ko'p uchraydigan xatolar

7.1 Float bilan ustunlar

Eski maqoladan olingan float: left; width: 33% kartalar — bir kartaning bo'yi uzun bo'lsa, keyingi qator "tiqilib" qoladi. Tuzatish: layout uchun Flexbox yoki Grid. float — faqat matn o'rash uchun.

7.2 Ota float'ni o'ramayapti

• Karta ichida faqat float — kartaning chegarasi va foni "yassi" bo'lib qoldi.
• overflow: hidden bilan "tuzatildi", lekin endi "Yangi!" belgisi, soya va fokus halqasi kesilyapti.
• overflow: clip yozildi — margin baribir chiqyapti, float o'ralmayapti: clip xona ochmaydi.

Tuzatish (uchalasiga ham): otaga display: flow-root.

7.3 text-align: center rasmning o'ziga

Rasm qimirlamaydi. Tuzatish: satr ichidagi rasm uchun — otasiga text-align: center; blok rasm uchun — margin-inline: auto.

8. Mashqlar

Mashqlarni kurs/mashqlar/05/ papkasida bajaring.

1-mashq (oson): Xona kerakmi?

Har vaziyat uchun javob yozing:

1. Kartaning birinchi h3 margin'i kartadan chiqmasin, hech narsa kesilmasin: display:
2. overflow: clip yangi BFC yaratadimi? —
3. overflow: auto li o'ram ichidagi float o'raladimi? —
4. Float ostidan boshlanishi kerak bo'lgan sarlavhaga: clear:

Ishora: «BFC'ni nima yaratadi» jadvali va «overflow: clip — BFC yaratmaydi» natijasi.

2-mashq (o'rta): "Kun taomi" bloki

«Bahor» bosh sahifasiga shu blok qo'shildi:

<article class="kun-taomi">
  <h2>Kun taomi</h2>
  <svg class="lagan" viewBox="0 0 100 100" role="img"
       aria-label="Bir lagan manti">
    <circle cx="50" cy="50" r="48" fill="#e9b949" />
  </svg>
  <p>Rustam aka bugun manti tugdi: qo'y go'shti, piyoz va
  dumba bilan. Qasqonda bug'da pishadi.</p>
  <h3>Narxi</h3>
  <p>Besh dona — 30 000 so'm.</p>
</article>

asosiy.css ga yozing:

1. Lagan o'ngda turadi, eni va bo'yi 6rem, matndan 1rem uzoqda.
2. "Narxi" sarlavhasi lagan yonida emas, uning ostidan boshlansin.
3. Blokka 2px yashil chegara va qaymoq fon bering. Lagan chegaradan chiqib ketmasin.

Ishora: «Birinchi float», «Ota balandligini yo'qotadi» va «clear» bo'limlari. kun-taomi va lagan — shu mashq uchun nomlar, «Bahor» ro'yxatiga kirmaydi.

<style>
  :root {
    --rang-asosiy: #2f6b3a;
    --rang-fon: #fffaf0;
  }
  .kun-taomi {
    display: flow-root;
    max-width: 30rem;
    padding: 0 1rem;
    border: 2px solid var(--rang-asosiy);
    background-color: var(--rang-fon);
  }
  .lagan {
    float: right;
    width: 6rem;
    height: 6rem;
    margin-left: 1rem;
  }
  .kun-taomi h3 {
    clear: both;
  }
</style>
<article class="kun-taomi">
  <h2>Kun taomi</h2>
  <svg class="lagan" viewBox="0 0 100 100" role="img"
       aria-label="Bir lagan manti">
    <circle cx="50" cy="50" r="48" fill="#e9b949" />
  </svg>
  <p>Rustam aka bugun manti tugdi: qo'y go'shti, piyoz va
  dumba bilan. Qasqonda bug'da pishadi.</p>
  <h3>Narxi</h3>
  <p>Besh dona — 30 000 so'm.</p>
</article>

3-mashq (qiyin): Yumaloq lagan va ro'yxat

Stajyor "Kun taomi" ni shunday yozdi:

.kun-taomi {
  overflow: hidden;
}
.lagan {
  float: left;
  width: 9rem;
  height: 9rem;
  margin: 0 1rem 1rem 0;
  border-radius: 50%;
}

Blok ichida p va ikki bandli ul bor. Shikoyatlar:

• (a) Matn yumaloq laganni to'rtburchak kabi aylanib o'tyapti, burchaklarda bo'sh joy.
• (b) Ro'yxat belgilari lagan ustiga chiqib qolgan.
• (c) Dizayner blokning tepa chetiga "Yangi!" belgisini chiqarib qo'ydi — uning yarmi kesilgan.

Har shikoyatning sababini toping va tuzatilgan CSS yozing.

Ishora: «overflow: clip», «Float yonidagi BFC» (savoli bilan) va «To'rtburchakdan doiraga» bo'limlari. border-radius faqat ko'rinishni o'zgartiradi, o'rash shaklini emas.

.kun-taomi {
  display: flow-root;
}
.lagan {
  float: left;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  shape-outside: circle();
  shape-margin: 1rem;
}
.kun-taomi ul {
  display: flow-root;
}

4-mashq: Portfolio qadami — bosh sahifa rasmi o'ngda

Portfoliongizning bosh sahifasida rasm (width="480") paragrafdan keyin alohida turibdi. Uni o'ng tomonga suzdiramiz: "So'nggi loyihalar" bo'limi rasm yonidan oqib o'tsin.

1. main > img o'ngga float qilinsin. Eni — ustunning 45 foizi, lekin 15rem dan katta emas.
2. Rasm va matn orasida chapda 1rem, rasm ostida ham 1rem bo'shliq bo'lsin.
3. Ikkinchi bo'lim ("Nimalarni bilaman") rasm yonida emas, uning ostidan boshlansin.
4. DevTools'da 360 va 1280 enda tekshiring: rasm ustundan chiqmasin, matn uning yonida o'qilsin.

Ishora: Rasm va media darsidagi reset max-width: 100% beradi — float bilan ham ishlaydi. Eng kichigini tanlash — min() (Matematik funksiyalar). Ikkinchi bo'lim — section + section.

main > img {
  float: right;
  width: min(45%, 15rem);
  margin: 0 0 1rem 1rem;
}

main > section + section {
  clear: both;
}

<style>
  :root {
    --rang-matn: #1f2a24;
    --rang-fon: #f7faf8;
    --rang-asosiy: #1f6f4a;
  }
  body {
    margin: 0;
    font-family: system-ui, sans-serif;
    line-height: 1.5;
    color: var(--rang-matn);
    background-color: var(--rang-fon);
  }
  main {
    width: min(100% - 2rem, 70ch);
    margin-inline: auto;
  }
  h1,
  h2 {
    color: var(--rang-asosiy);
    line-height: 1.2;
  }
  h2 {
    font-size: 1.375rem;
  }
  img {
    display: block;
    max-width: 100%;
    height: auto;
  }
  main > img {
    float: right;
    width: min(45%, 15rem);
    margin: 0 0 1rem 1rem;
    border-radius: 0.5rem;
  }
  main > section + section {
    clear: both;
  }
</style>
<main id="asosiy">
  <h1>Salom, men Aziz — boshlovchi frontend dasturchiman</h1>
  <p>Veb-saytlarni noldan o'rganyapman. Hozir HTML'ni to'liq
  bilaman: semantika, formalar, accessibility va SEO.</p>
  <img alt="Noutbukda ochiq turgan HTML kod"
    width="480" height="320"
    src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
    width='480' height='320'><rect width='480' height='320'
    fill='%231f2a24'/><rect x='40' y='60' width='240' height='16'
    fill='%231f6f4a'/><rect x='40' y='100' width='320' height='16'
    fill='%23c9d6cf'/><rect x='80' y='140' width='200' height='16'
    fill='%23c9d6cf'/></svg>">
  <section>
    <h2>So'nggi loyihalar</h2>
    <ul>
      <li><a href="loyihalar/bahor/">Choyxona «Bahor» sayti</a>
        — menyu, stol band qilish formasi va 404 sahifasi.</li>
      <li><a href="loyihalar/">Barcha loyihalar</a></li>
    </ul>
  </section>
  <section>
    <h2>Nimalarni bilaman</h2>
    <ul>
      <li>Semantik HTML va sahifa landmarklari</li>
      <li>Accessible formalar va brauzer validatsiyasi</li>
    </ul>
  </section>
</main>

9. Real ishda

• Maqola va yangiliklar saytlari — rasm yoki iqtibos chetda, matn uning atrofida: float ning bugungi asosiy ishi.
• Jurnal uslubidagi sahifalar — shape-outside bilan matn doira yoki portret silueti bo'ylab o'raladi.
• Eski loyihalar — float bilan qurilgan ustunlar va clearfix. Ularni ko'rsangiz, qo'rqmang: shu darsdagi BFC va float qoidalari yetarli. Yangi layout'ni esa Flexbox va Grid bilan yozasiz.
• Intervyuda so'raladi: "BFC nima va uni qanday yaratasiz?", "Float ichidagi ota nega balandligini yo'qotadi?", "Clearfix nima uchun kerak edi va bugun uning o'rniga nima?", "overflow: hidden bilan flow-root farqi?".

Xulosa

• Normal oqim: bloklar tepadan pastga, matn va satr ichidagi elementlar qator-qator. Blok ichidagi "yalang'och" matn anonim qutiga o'raladi.
• IFC'da har qator — qator qutisi. text-align shu qutilar ichini tekislaydi, shuning uchun u otaga yoziladi.
• BFC — yopiq xona: margin'larni chiqarmaydi, float'larni o'raydi, qo'shni float ostiga kirmaydi.
• BFC'ning eng toza yo'li — display: flow-root. overflow: hidden ham BFC, lekin kesadi; overflow: clip — BFC emas.
• float — faqat matnni rasm atrofida o'rash uchun; clear float ostidan boshlaydi; shape-outside matnga doira yoki boshqa shakl beradi.
• Clearfix — tarix; uning o'rniga flow-root.

Keyingi dars: position: relative, absolute va containing block — elementni oqimdan butunlay chiqarib, kartaning istalgan burchagiga joylashni o'rganamiz.

Manbalar

• MDN: "Introduction to formatting contexts", "Block formatting context", "Flow layout", "float", "clear", "shape-outside" — developer.mozilla.org
• W3C: "CSS 2.2 — Visual formatting model" (9-bob) — w3.org/TR/CSS22/visuren.html
• W3C: "CSS Display Module Level 3" (flow-root) va "CSS Overflow Module Level 3" (clip) — w3.org/TR/css-display-3, w3.org/TR/css-overflow-3
• W3C: "CSS Shapes Module Level 1" — w3.org/TR/css-shapes-1
• web-features (Baseline ma'lumotlari): "display-flow-root", "shape-outside", "float-clear" — github.com/web-platform-dx/web-features