Luồng bình thường là cách các phần tử được hiển thị trong một trang web trong hầu hết các trường hợp. Tất cả các phần tử trong HTML là các hộp bên trong hoặc là các hộp nội tuyến hoặc các hộp khối .
Đặt ra khối hộp
Trong luồng thông thường, các hộp khối được định vị trên một trang sau cái khác (theo thứ tự chúng được viết bằng HTML ). Chúng bắt đầu ở phía trên bên trái của hộp chứa và ngăn xếp từ trên xuống dưới. Khoảng cách giữa mỗi hộp được xác định bởi các lề với các lề trên và dưới sụp đổ vào nhau.
Ví dụ: bạn có thể có HTML sau:
Đây là div đầu tiên. Nó rộng 200 pixel với khoảng 5px xung quanh nó.
Đây là một div rộng hơn.
Đây là một div rộng hơn một chút so với cái thứ hai.
Mỗi DIV là một phần tử khối, vì vậy nó sẽ được đặt bên dưới phần tử khối trước đó. Mỗi cạnh ngoài bên trái sẽ chạm vào cạnh trái của khối chứa.
Đặt ra các hộp nội tuyến
Các hộp nội tuyến được đặt trên trang theo chiều ngang, một sau khi bắt đầu ở đầu phần tử vùng chứa. Khi không có đủ không gian để phù hợp với tất cả các phần tử của hộp nội tuyến trên một dòng, chúng sẽ bao trùm dòng tiếp theo và ngăn xếp theo chiều dọc từ đó.
Ví dụ: trong HTML sau:
Văn bản này được in đậm và văn bản này là chữ nghiêng . Và đây là văn bản thuần túy.
Đoạn này là một phần tử khối, nhưng có 5 yếu tố nội tuyến:
- "Văn bản này là "
- "Dũng cảm"
- "và văn bản này là"
- "chữ in nghiêng"
- "Và đây là văn bản thuần túy."
Dòng chảy bình thường là cách các phần tử khối và nội tuyến sẽ hiển thị trên trang web mà không có bất kỳ sự can thiệp nào của nhà thiết kế web.
Nếu bạn muốn ảnh hưởng đến vị trí của một phần tử trên trang, bạn có thể sử dụng định vị CSS hoặc nổi CSS .