Normal Flow

Sepanjang section sebelumnya kita mengatur satu kotak pada satu waktu: ukuran, padding, border, margin, warna, dan tipografinya. Belum kita jawab satu pertanyaan yang jauh lebih mendasar: dari mana browser tahu bahwa paragraf harus berada di bawah judul, dan tautan harus menyatu di tengah kalimat? Jawabannya adalah normal flow — algoritme tata letak bawaan yang bekerja pada setiap halaman meskipun kita belum menulis satu baris CSS layout pun. Chapter ini membedah alur default tersebut, dan section Display dan Normal Flow keseluruhannya membangun fondasi sebelum kita masuk ke Flexbox, Grid, dan Positioning.

Algoritme Tata Letak Default #

Normal flow adalah aturan penyusunan yang diterapkan browser pada setiap dokumen HTML. Aturannya hanya dua, tetapi keduanya menjelaskan hampir semua halaman yang pernah kita lihat:

• Kotak block disusun vertikal dari atas ke bawah. Setiap kotak menempati satu baris untuk dirinya sendiri; elemen block berikutnya selalu mulai di bawahnya, bukan di sampingnya.
• Kotak inline mengalir horizontal dari kiri ke kanan di dalam baris teks. Ketika ruang di baris habis, aliran berlanjut ke baris baru — perilaku ini disebut wrap.

Dua aturan ini bekerja dalam dua konteks berbeda pada satu halaman: level block untuk struktur (header, paragraf, daftar) dan level inline untuk isi teks (kata tebal, tautan, potongan kode). Browser menjalankan keduanya tanpa menunggu instruksi, dan hasilnya selalu prediktabel: urutan visual mengikuti urutan markup.

Membedah Halaman Tanpa CSS Layout #

Mari kita lihat potongan HTML biasa tanpa satu pun aturan layout:

<article class="artikel-kopi">
  <h2>Kopi Gayo</h2>
  <p>
    Kopi Gayo tumbuh di dataran tinggi Aceh Tengah. Kacangnya
    diproses secara <strong>semi-washed</strong>, sehingga
    rasanya bersih dengan keasaman sedang.
  </p>
  <p>
    Banyak kedai menyajikannya sebagai menu andalan, termasuk
    <a href="#kedai-senja">Kedai Senja</a> di Yogyakarta.
  </p>
</article>

Mari kita telaah apa yang dilakukan browser pada markup di atas:

1. <h2>: elemen block, jadi browser menempatkannya di baris pertama dengan lebar penuh container.
2. <p> pertama: juga block, jadi paragraf ini mulai tepat di bawah judul dan menempati satu baris penuh.
3. <strong> dan <a>: keduanya inline, jadi frasa tebal dan tautan menyatu di tengah aliran teks, bukan turun ke baris sendiri.
4. Pemenggalan baris: kalimat yang panjang otomatis dipatahkan ke baris berikutnya saat lebar halaman tidak mencukupi.

Demo berikut menampilkan markup campuran h2, p, dan span dengan border pada setiap kotak agar batasnya terlihat:

Dua Konteks dalam Satu Halaman #

Perbedaan kedua jenis kotak itu bisa diringkas dalam satu tabel:

Lebar penuh pada kotak block berasal dari width: auto, yang dibahas pada chapter Nilai Auto: kotak block mengisi lebar container tanpa meluber. Adapun jarak vertikal antar paragraf berasal dari margin bawaan browser, dan margin vertikal antar kotak block dapat menyatu — topik chapter Margin Collapse.

Fondasi yang Prediktabel #

Kenapa alur default ini layak dibahas serius? Karena semua teknik layout pada dasarnya adalah perubahan atas normal flow, bukan sesuatu yang berdiri sendiri. Ketika sebuah halaman terlihat melawan keinginan kita, hampir selalu penyebabnya sederhana: elemen yang bersangkutan masih berada di normal flow dengan nilai display yang tidak kita duga. Bandingkan dua pengubah yang akan kita pelajari nanti:

/* Section Flexbox: mengganti cara penyusunan di dalam container */
.daftar-menu {
  display: flex;
  gap: 12px;
}

/* Section Positioning: mengeluarkan kotak dari alur */
.lencana-baru {
  position: absolute;
  top: 8px;
  right: 8px;
}

Keduanya hanya terjadi karena aturan tersebut secara sadar mengubah atau meninggalkan alur default — memahami default berarti memahami dengan tepat apa yang diubah.

Ringkasan #

Normal flow adalah algoritme default browser: kotak block menumpuk secara vertikal dengan lebar penuh, kotak inline mengalir secara horizontal dan patah baris saat ruang habis, dan keduanya bekerja dalam dua konteks pada halaman yang sama. Semua teknik layout lanjutan pada dasarnya mengubah alur ini secara sadar. Sumber perbedaan kedua jenis kotak tersebut adalah satu property: display — dan itulah yang kita bedah pada chapter berikutnya.