Khái niệm về flow tự nhiên của CSS

Flow tự nhiên của CSS là cách các phần tử HTML được sắp xếp trên trang web theo trình tự mặc định của chúng. Hiểu rõ flow tự nhiên là nền tảng quan trọng giúp bạn tạo ra các bố cục linh hoạt và dễ quản lý. Trong bài học này, bạn sẽ nắm được các khái niệm cơ bản về flow tự nhiên của CSS, cách các phần tử block và inline hoạt động, và cách sử dụng các thuộc tính để thay đổi flow tự nhiên.

Khái niệm về flow

1. Flow tự nhiên của CSS

• Định nghĩa: Flow tự nhiên là cách mà các phần tử HTML được hiển thị theo thứ tự xuất hiện trong mã nguồn khi không áp dụng bất kỳ kiểu CSS nào.

• Các loại phần tử trong flow tự nhiên:

  1. Phần tử block:

     • Chiếm toàn bộ chiều ngang của container.
     • Luôn bắt đầu trên một dòng mới.
     • Có thể chứa cả phần tử block và inline.
     • Ví dụ: <div>, <p>, <h1>, <section>.

  2. Phần tử inline:

     • Chỉ chiếm diện tích nội dung thực tế.
     • Không phá vỡ dòng hiện tại.
     • Thường được sử dụng để định dạng nội dung trong phần tử block.
     • Ví dụ: <span>, <a>, <em>, <strong>.

• Luồng sắp xếp tự nhiên:

  • Các phần tử block sẽ được sắp xếp từ trên xuống dưới.
  • Các phần tử inline sẽ sắp xếp từ trái sang phải trên cùng một dòng.

2. Thuộc tính float

• Công dụng: Thuộc tính float được sử dụng để đẩy một phần tử sang bên trái hoặc phải, cho phép các phần tử khác bao quanh nó.

• Các giá trị của float:

  • none (mặc định): Không áp dụng float.
  • left: Đẩy phần tử sang bên trái.
  • right: Đẩy phần tử sang bên phải.

• Ứng dụng thực tế:

  • Tạo bố cục hai cột.
  • Đặt hình ảnh bên trái hoặc phải với văn bản bao quanh.

• Lưu ý:

  • Khi sử dụng float, phần tử cha có thể không bao gồm được phần tử con đã float. Cần sử dụng kỹ thuật "clearfix" để giải quyết.

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

3. Thuộc tính clear

• Công dụng: Thuộc tính clear ngăn các phần tử được hiển thị bên cạnh phần tử đã float.

• Các giá trị của clear:

  • none: Không áp dụng clear (mặc định).
  • left: Ngăn các phần tử được hiển thị bên trái.
  • right: Ngăn các phần tử được hiển thị bên phải.
  • both: Ngăn cả hai bên.

• Ứng dụng:

  • Đảm bảo bố cục không bị chồng chéo khi sử dụng float.

4. Tác động của flow tự nhiên đến layout

• Các phần tử không float hoặc không áp dụng position sẽ tuân theo flow tự nhiên.
• Việc điều chỉnh flow tự nhiên giúp bạn kiểm soát tốt hơn cách trình bày nội dung và tạo ra các bố cục phức tạp hơn.

Thực hành mở rộng

1. Tạo layout hình ảnh và văn bản:

   • Đặt hình ảnh ở bên trái và văn bản bao quanh nó.
   • Sử dụng float và clear để điều chỉnh bố cục.

2. Thiết kế bố cục hai cột:

   • Một cột cho nội dung và một cột cho sidebar.
   • Sử dụng float cho cả hai cột và đảm bảo chiều cao đồng bộ.

3. Sử dụng clearfix:

   • Thêm lớp clearfix vào container chứa các phần tử đã float để đảm bảo chúng được bao bọc đầy đủ.

<div class="container clearfix">
  <div class="float-left">Cột trái</div>
  <div class="float-right">Cột phải</div>
</div>

Kết quả mong đợi

Sau bài học này, bạn sẽ:

• Hiểu rõ cách các phần tử HTML được sắp xếp theo flow tự nhiên của CSS.
• Biết cách sử dụng float và clear để điều chỉnh bố cục.
• Áp dụng kỹ thuật "clearfix" để xử lý các vấn đề liên quan đến float trong thiết kế.