Sejauh ini kita menyebut “alur” sebagai gambaran umum. Dalam spesifikasi, istilah resminya adalah formatting context: wilayah di mana browser menyusun kotak dengan satu set aturan yang utuh. Konsep ini sering dilewati karena tidak ada property bernama “formatting context” yang kita ketik setiap hari — tetapi ia menjelaskan dua gejala klasik yang menghabiskan waktu banyak developer: float yang lolos dari induknya, dan margin yang menyatu di tempat yang tidak disangka.
Block Formatting Context (BFC) #
Block formatting context (BFC) adalah area layout mandiri tempat kotak block disusun berdasarkan aturan normal flow. “Mandiri” adalah kata kuncinya: margin dan float yang hidup di dalam BFC tidak berinteraksi dengan dunia luar. Elemen yang membentuk BFC berperan ganda:
- Tembok margin: margin vertikal anak tidak lagi menyatu (collapse) melintasi batasnya.
- Penampung float: float di dalamnya ikut dihitung sebagai bagian tinggi elemen tersebut.
Apa Saja yang Membentuk BFC #
| Kondisi | Catatan |
|---|---|
Elemen html (root) | BFC paling luar dari seluruh dokumen |
display: flow-root | Cara modern yang paling bersih dan eksplisit |
overflow selain visible | hidden, scroll, auto — trik lama yang masih banyak dipakai |
display: inline-block | Nilai hybrid dari chapter Inline-Block |
float selain none | Elemen float sendiri membentuk BFC |
display: flex atau grid | Container flex/grid adalah BFC untuk lingkungannya |
position: absolute atau fixed | Elemen keluar dari alur membentuk BFC sendiri |
Daftar ini tidak perlu dihafal penuh; yang penting adalah menyadari bahwa banyak property yang kita tulis sehari-hari diam-diam membentuk BFC. Kebetulan atau tidak, display: flow-root adalah satu-satunya yang tujuannya murni “jadilah BFC, tanpa efek lain”.
Kenapa Penting 1: Menampung Float #
Float menarik elemen ke sisi kiri atau kanan sehingga teks mengalir menyusulinya — mekanisme yang dibahas lebih jauh di section Positioning. Masalahnya: induk yang tidak membentuk BFC tidak menghitung float-nya sebagai bagian tinggi. Akibatnya induk tampak “runtuh” seolah kosong, sementara kotak float menembus keluar melewati border-nya. Perbaikan klasiknya adalah hack bernama clearfix, dan perbaikan modernnya satu baris:
/* Trik klasik: clearfix lewat pseudo-element */
.wadah-berita::after {
content: "";
display: block;
clear: both;
}
/* Cara modern: satu baris, tanpa efek samping */
.wadah-berita {
display: flow-root;
}Dua wadah identik dengan konten float yang sama; yang kedua membentuk BFC:
Kenapa Penting 2: Memutus Margin Collapse #
Chapter Margin Collapse menjelaskan bahwa margin vertikal anak pertama bisa “lolos” ke luar induknya. Mekanisme penghentinya persis sama: induk yang membentuk BFC menahan margin tersebut di dalam dirinya. Inilah asal trik lama overflow: hidden pada induk untuk menahan margin — trik itu bekerja karena membentuk BFC, bukan karena sifat hidden itu sendiri. Masalahnya, overflow: hidden membawa efek pemotongan; bila dropdown atau tooltip keluar dari induk, konten itu terpotong. display: flow-root memberi hasil penahanan yang sama tanpa memotong apa pun, sehingga bila tujuannya hanya memutus collapse, pilihlah flow-root.
Sekilas: Inline Formatting Context (IFC) #
Pasangan dari BFC adalah inline formatting context (IFC): wilayah tempat browser menyusun kotak inline menjadi baris-baris teks (line boxes). Setiap paragraf p yang isinya teks adalah IFC — tinggi tiap barisnya ditentukan line-height, dan kotak inline di dalamnya diselaraskan lewat vertical-align. Konteks inilah yang bekerja di balik semua pembahasan tipografi; tidak perlu dipanggil eksplisit, cukup dikenali saat membaca spesifikasi.
Kesalahan Umum #
| Gejala | Penyebab | Perbaikan |
|---|---|---|
| Tinggi induk nol padahal isinya ada float | Induk tanpa BFC tidak menghitung float | display: flow-root pada induk |
| Margin paragraf pertama muncul di luar induk | Margin collapse menembus induk tanpa BFC | flow-root, atau pisahkan dengan padding/border |
Dropdown terpotong setelah induk diberi overflow: hidden | BFC lewat overflow membawa efek pemotongan | Gunakan flow-root bila tujuannya hanya menahan float/margin |
Ringkasan #
Formatting context adalah wilayah layout dengan aturan yang utuh: BFC menyusun kotak block dan menjadi tembok bagi margin serta penampung float, sedangkan IFC menyusun baris teks. Banyak property membentuk BFC secara diam-diam, dan display: flow-root adalah cara paling eksplisit untuk memintanya — pengganti modern clearfix sekaligus pemutus margin collapse yang bersih. Semua konsep section ini kini lengkap; chapter penutup menyatukannya menjadi satu peta berpikir untuk membaca layout apa pun.