CSS flow layout
Normal Flow, hay Flow Layout, là cách các phần tử block và inline được hiển thị trên trang trước khi bất kỳ thay đổi nào được thực hiện đối với layout của chúng. Flow về cơ bản là một tập hợp những thứ đang cùng làm việc với nhau và biết về nhau trong layout của bạn. Một khi một thứ gì đó bị đưa ra khỏi flow, nó hoạt động độc lập.
Trong normal flow, các phần tử inline hiển thị theo hướng inline, tức là theo hướng các từ được hiển thị trong một câu theo Writing Mode của tài liệu. Các phần tử block hiển thị lần lượt, như các đoạn văn trong Writing Mode của tài liệu đó. Trong tiếng Anh do đó, các phần tử inline hiển thị lần lượt, bắt đầu từ bên trái, và các phần tử block bắt đầu từ trên cùng và di chuyển xuống trang.
Ví dụ cơ bản
Ví dụ sau đây minh họa các hộp Block và Inline Level. Hai phần tử đoạn văn với border màu xanh lá là Block Level, hiển thị bên dưới nhau.
Câu đầu tiên cũng bao gồm một phần tử span với nền màu xanh dương. Đây là inline level và do đó hiển thị tại chỗ trong câu.