Di balik normal flow yang kita amati sejak awal section ini, ada aturan main yang lebih dalam: formatting context. Setiap area layout di halaman dikelola oleh sebuah formatting context — kumpulan aturan yang menentukan bagaimana kotak-kotak di dalamnya disusun, bagaimana margin berperilaku, dan bagaimana float ditangani. Memahami konsep ini menjawab dua teka-tekani klasik CSS: mengapa margin anak merambat keluar dari induknya, dan mengapa induk tidak menampung anak float-nya.

Apa Itu Formatting Context #

Block formatting context (BFC) adalah wilayah di mana kotak-kotak block disusun secara vertikal dengan aturan yang saling terisolasi dari wilayah lain (MDN: Block formatting context ). Margin collapse dan interaksi dengan float hanya terjadi di dalam BFC yang sama. Setiap elemen block pada normal flow berpartisipasi dalam BFC milik induknya, dan beberapa kondisi membuat elemen membentuk BFC baru untuk anak-anaknya:

  • elemen akar html;
  • display: flow-root (cara modern yang disengaja);
  • overflow bernilai selain visible, misalnya hidden atau auto;
  • elemen float, elemen position: absolute atau fixed, serta display: inline-block;
  • item dari container flexbox atau grid, dan sel tabel.

Pasangan konsepnya adalah inline formatting context (IFC) — wilayah di mana kotak inline disusun menjadi baris-baris teks, yang perilakunya telah kita amati pada chapter normal flow dan inline-block.

flow-root: Membentuk BFC Tanpa Efek Samping #

Sebelum ada display: flow-root, developer membentuk BFC dengan cara meminjam efek samping properti lain, paling sering overflow: hidden. Cara itu bekerja, tetapi membawa risiko: konten yang menonjol seperti box-shadow, dropdown menu, atau tooltip ikut terpotong. Nilai flow-root dibuat khusus untuk tugas ini — satu-satunya efeknya adalah membentuk BFC baru — dan dapat dipakai di seluruh browser modern. Perbedaan overflow sebagai wadah scroll dibahas tersendiri pada Chapter Overflow .

Dua Masalah yang Diselesaikan BFC #

html index.html 
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <style>
    * { box-sizing: border-box; margin: 0; }
    #bfc-margin {
      display: flow-root;
      background: rgb(191, 219, 254);
    }
    #bfc-margin > .anak {
      height: 80px;
      margin-top: 40px;
      background: rgb(254, 215, 170);
    }
    #float-bfc {
      display: flow-root;
      background: rgb(220, 252, 231);
    }
    #float-bfc > .float-anak {
      float: left;
      width: 120px;
      height: 80px;
      background: rgb(254, 215, 170);
    }
  </style>
</head>
<body>
  <div id="bfc-margin">
    <div class="anak">Margin 40px tertampung di dalam</div>
  </div>
  <div id="float-bfc">
    <div class="float-anak">Float 120×80</div>
  </div>
</body>
</html>

Hasil di Browser:

text 
Wadah biru menampung seluruh margin-top 40px milik anaknya di dalam
dirinya; computed display-nya flow-root dan tingginya 120px
(40px margin + 80px anak).
Wadah hijau menampung float 120×80px sepenuhnya; computed display-nya
flow-root dan tingginya 80px. Wadah pembanding tanpa flow-root yang
menampung float yang sama memiliki tinggi 0px.

Mari kita bedah kedua wadah:

  1. Baris 5–7 (#bfc-margin): wadah membentuk BFC baru. Margin-top 40px milik anak tidak lagi merambat keluar melainkan mendorong anak ke bawah di dalam wadah, sehingga tinggi wadah menjadi 40 + 80 = 120px. Pada wadah biasa, margin yang sama akan keluar dan menempel pada margin elemen di atas wadah — mekanisme penuhnya dibahas pada Chapter Margin Collapse .
  2. Baris 12–19 (#float-bfc beserta anaknya): float dikeluarkan dari alur normal, sehingga wadah biasa menganggap dirinya kosong dan tingginya 0px — bisa Anda lihat pada panel pembanding di demo. Karena wadah ini membentuk BFC, browser menghitung float ke dalam tingginya: 80px.
  3. Dua wadah, dua aturan: perhatikan bahwa tidak ada satu pun properti tinggi yang dituliskan. Kedua tinggi itu murni hasil dari aturan BFC.

IFC Secara Singkat #

Inline formatting context mengatur kotak-kotak inline: browser menyusunnya menjadi baris-baris (line box), lalu meratakan isinya menurut vertical-align dan text-align. Setiap campuran teks dan elemen inline pada paragraf hidup di dalam IFC, dan pemotongan baris yang kita amati pada demo normal flow adalah pekerjaan IFC itu sendiri. Untuk layout yang lebih kompleks daripada sekadar baris teks, flexbox dan grid membentuk formatting context baru dengan aturan jauh lebih kaya — pintu menuju Section Flexbox dan Grid .

Dengan formatting contexts, seluruh bagian Section Display dan Flow ini tersambung: display menentukan tipe kotak, tipe kotak menentukan alurnya, dan formatting context menentukan aturan main wilayah tempat kotak itu berada.