Jika sebuah file HTML dibuka di browser tanpa satu pun baris CSS, hasilnya tetap tersusun teratur: judul berada di atas, paragraf di bawahnya, dan teks mengalir dari kiri ke kanan. Kerapian tersebut bukan kebetulan, melainkan hasil kerja normal flow — alur tata letak bawaan yang langsung diterapkan browser pada setiap dokumen. Memahami normal flow penting karena semua metode layout lain, mulai dari flexbox hingga grid, pada dasarnya mengambil alih atau melengkapi alur ini. Pada Chapter ini kita mengamati bagaimana elemen block dan inline berperilaku ketika dibiarkan mengikuti alur bawaan.

Dua Arus di Dalam Normal Flow #

Normal flow adalah skema penataan default yang dijalankan browser sebelum kita menulis properti layout apa pun (MDN: Visual Formatting Model ). Di dalamnya ada dua jenis kotak yang bergerak dengan aturan berbeda:

  • Elemen block — misalnya div, p, h1, dan ul — disusun vertikal dari atas ke bawah. Setiap kotak block memulai baris baru dan secara default memenuhi lebar wadahnya.
  • Elemen inline — misalnya span, strong, em, dan a — mengalir horizontal di dalam baris teks, lalu melipat ke baris berikutnya ketika ruang baris habis. Elemen inline tidak memulai baris baru.

Browser menentukan jenis kotak ini dari nilai display bawaan setiap elemen HTML: block untuk paragraf dan judul, inline untuk penanda teks. Nilai display dapat kita ubah kapan pun — materi itu dibahas pada Chapter Block dan Inline — tetapi di sini kita mengamati perilaku bawaannya terlebih dahulu.

Contoh: Blok Bertumpuk, Teks Mengalir #

Demo berikut menaruh tiga kotak block di dalam sebuah arena selebar 600px, lalu satu paragraf yang berisi beberapa elemen inline.

html index.html 
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <style>
    * { box-sizing: border-box; margin: 0; }
    .arena { width: 600px; outline: 2px solid rgb(148, 163, 184); }
    .arena > div {
      height: 48px;
      margin-bottom: 8px;
      padding: 12px 16px;
      background: rgb(186, 230, 253);
    }
    .arena p { padding: 8px 16px 16px; line-height: 1.9; }
    .arena span, .arena strong { background: rgb(254, 215, 170); }
  </style>
</head>
<body>
  <div class="arena">
    <div id="blok-satu">Blok pertama</div>
    <div id="blok-dua">Blok kedua</div>
    <div id="blok-tiga">Blok ketiga</div>
    <p id="paragraf">
      Teks <span id="span-a">inline pertama</span> dan
      <strong id="strong-b">inline kedua</strong> mengalir searah
      horizontal, lalu pindah ke baris baru saat ruang baris habis.
    </p>
  </div>
</body>
</html>

Hasil di Browser:

text 
Tiga kotak biru muda tersusun vertikal, masing-masing setinggi 48px
dengan jarak antarkotak 8px, dan setiap kotak memenuhi lebar arena
(computed width: 600px). Paragraf di bawahnya juga block; teks di
dalamnya mengalir horizontal dan bagian span/strong berlatar oranye
tanpa memulai baris baru. Nilai computed display: block untuk div
dan p, inline untuk span serta strong.

Mari kita bedah aturan CSS di dalam blok <style> baris demi baris:

  1. Baris 5 (.arena { width: 600px; ... }): arena selebar 600px menjadi wadah (containing block) bagi ketiga kotak. outline dipilih alih-alih border agar garis penanda tidak mengubah lebar konten arena.
  2. Baris 6–10 (.arena > div): setiap anak div diberi tinggi 48px, jarak bawah 8px, dan warna latar. Karena ketiganya block-level, browser menumpuknya dari atas ke bawah tanpa satu pun properti posisi.
  3. Baris 11 (.arena p): paragraf tetap elemen block — ia memenuhi lebar arena dan dimulai pada baris baru setelah kotak ketiga.
  4. Baris 12 (.arena span, .arena strong): latar oranye hanya menandai bagian inline. Perhatikan bahwa warna mengikuti aliran teks dan terpotong secara wajar di ujung baris.

Kapan Normal Flow Tanpa Tambahan #

Dokumen berbasis teks — artikel, dokumentasi, halaman bantuan — sering kali tidak membutuhkan apa pun di luar normal flow. Browser telah menyusun judul, paragraf, daftar, dan gambar secara berurutan; tugas kita tinggal mengatur tipografi dan spasi. Semakin sedikit alur bawaan yang kita ganggu, semakin ringkas dan tangguh halamannya.

Normal flow juga menjadi titik acuan ketika layout berperilaku tidak terduga. Banyak kasus yang tampak tidak wajar sebenarnya adalah perilaku alur yang belum kita kenal, misalnya jarak antarparagraf yang bergabung menjadi satu (margin collapse, dibahas pada Chapter Margin Collapse ) atau kotak induk yang tidak menampung anak float-nya (dibahas pada Chapter Formatting Contexts ).

Dua chapter berikutnya membedah kedua anggota alur ini satu per satu: perilaku block dan inline pada Chapter Block dan Inline , kemudian mode hibrida inline-block. Setelah itu kita mempelajari dua cara menyingkirkan elemen dari alur, yaitu display: none dan visibility: hidden.