Aliran normal adalah cara elemen ditampilkan di halaman web dalam sebagian besar keadaan. Semua elemen dalam HTML berada di dalam kotak yang berupa kotak inline atau kotak blok .
Meletakkan Kotak Blok
Dalam aliran normal, kotak blok diposisikan pada halaman satu demi satu (dalam urutan yang ditulis dalam HTML ). Mereka mulai di kiri atas kotak yang mengandung dan menumpuk dari atas ke bawah. Jarak antara masing-masing kotak ditentukan oleh margin dengan margin atas dan bawah runtuh ke satu sama lain.
Misalnya, Anda mungkin memiliki HTML berikut:
Ini adalah div pertama. Lebar 200 piksel dengan margin 5 piksel di sekitarnya.
Ini adalah div yang lebih luas.
Ini adalah div yang sedikit lebih lebar dari yang kedua.
Setiap DIV adalah elemen blok, sehingga akan ditempatkan di bawah elemen blok sebelumnya. Setiap tepi luar kiri akan menyentuh tepi kiri dari blok yang mengandung.
Meletakkan Kotak Inline
Kotak sebaris diletakkan di halaman secara horizontal, satu demi satu dimulai di bagian atas elemen penampung. Ketika tidak ada cukup ruang untuk mencocokkan semua elemen dari kotak inline pada satu baris, mereka membungkus ke baris berikutnya dan menumpuk secara vertikal dari sana.
Misalnya, dalam HTML berikut:
Teks ini tebal dan teks ini dicetak miring . Dan ini adalah teks biasa.
Paragrafnya adalah elemen blok, tetapi ada 5 elemen inline:
- "Teks ini adalah"
- "berani"
- "dan teks ini adalah"
- "huruf miring"
- ". Dan ini adalah teks biasa."
Jadi aliran normal adalah bagaimana blok dan elemen inline ini akan ditampilkan di halaman web tanpa intervensi apa pun oleh perancang web.
Jika Anda ingin memengaruhi tempat elemen berada di halaman, Anda dapat menggunakan pemosisian CSS atau pelampung CSS .