Cách sử dụng thuộc tính Float trong CSS để thiết kế Layout

Khái niệm về thuộc tính float

Thuộc tính float có tác dụng đẩy phần tử sang bên trái hoặc bên phải.

Nó thường được áp dụng vào việc thiết kế bố cục của trang web (Layout)

Ở Layout phía trên, phần nằm giữa gồm ba khối: menu, nội dung, quảng cáo.

Thông thường, các phần tử khối sẽ bắt đầu trên một hàng mới. Nhưng ở đây, cả ba phần tử khối có thể nằm trên cùng một hàng đó là nhờ vào thuộc tính float.

• Trước tiên, ta thiết lập khối menu chiều rộng 30% và đẩy nó sang trái. (Xem ví dụ)
• Tiếp theo, ta thiết lập khối nội dung chiều rộng 50% và đẩy nó sang trái (Nếu một phần tử được đẩy sang trái thì nó sẽ nối đuôi phần tử đứng trước nó). Do đó, khối nội dung sẽ được nằm cạnh khối menu (Xem ví dụ)
• Cuối cùng, còn dư 20% ta thiết lập cho khối quảng cáo và đẩy nó sang trái (Xem ví dụ)

Cách sử dụng thuộc tính float

Trong đó:

• left: đẩy phần tử sang bên trái
• right: đẩy phần tử sang bên phải
• none: không thiết lập thuộc tính float (mặc định)
• inherit: kế thừa giá trị thuộc tính float của phần tử chứa nó

.abc {
    float:right;
}
.xyz {
    float:left;
}

Nguyên lý hoạt động của thuộc tính float

Nguyên lý 1:

Khi một phần tử được thiết lập thuộc tính float:

• Nó sẽ được bắt đầu ở hàng phía trên , nếu hàng phía trên còn đủ chỗ trống để chứa nó.
• Nó sẽ được bắt đầu ở hàng mới, nếu hàng phía trên không đủ chỗ trống để chứa nó (Xem ví dụ).

Lưu ý: Nếu một phần tử được thiết lập thuộc tính float mà trong khi phần tử đứng trước nó không được thiết lập thuộc tính float, thì mặc định nó được bắt đầu ở hàng mới (Xem ví dụ)

Nguyên lý 2:

Theo nguyên lý 1 chúng ta biết rằng: khi hàng không đủ chỗ chứa phần tử thì phần tử phải bắt đầu ở hàng mới. Tuy nhiên, cách bắt đầu như thế nào mới là quan trọng.

Khi trên một hàng có nhiều phần tử được thiết lập thuộc tính float và mỗi phần tử có chiều cao khác nhau, nếu hàng không đủ chỗ chứa phần tử thì phần tử sẽ bắt đầu bên cạnh phần tử có chiều cao thấp nhất và còn đủ khoảng trống để chứa nó (Xem ví dụ).

Tắt sự ảnh hưởng của thuộc tính float

Nếu một phần tử được thiết lập thuộc tính float, trong khi phần tử nằm phía sau nó không được thiết lập thuộc tính float, thì khi đó phần tử nằm phía sau sẽ bị tác động xấu bởi thuộc tính float (Xem ví dụ)

Để khắc phục vấn đề này, ta thêm thuộc tính clear vào phần tử phía sau theo cú pháp:

clear: none | left | right | both | inherit;

Trong đó:

• none: cho phép phần tử chịu sự ảnh hưởng của thuộc tính float
• left: không bị ảnh hưởng bởi thuộc tính float left
• right: không bị ảnh hưởng bởi thuộc tính float right
• both: không bị ảnh hưởng bởi thuộc tính float
• inherit: kế thừa giá trị thuộc tính clear của phần tử chứa nó

p {
    clear:both;
}

Chống tràn phần tử

Nếu một phần tử được thiết lập thuộc tính float và có kích thước lớn hơn phần tử chứa nó thì khi đó phần tử sẽ bị tràn ra khỏi phần tử chứa nó.

Để khắc phục vấn đề này, ta thêm thuộc tính overflow:auto vào phần tử chứa nó.

.container {
    overflow: auto;
}

Thiết kế một Layout đơn giản

Bước 1: Phân tích các khối chính (cấp 1)

Layout gồm 3 khối chính là: Header, Content, Footer (Xem ví dụ)

Lưu ý: Khối chính nhất là khối Container dùng để bao bọc 3 khối đó.

Bước 2: Phân tích các khối chính (cấp 2)

Bên trong khối Content được chia thành 2 phần: Menu, Baiviet (Xem ví dụ)

Bước 3: Phân tích các khối chính (cấp 3)

Bên trong khối Menu có một cái menu, ta gọi nó là menu_child

Bên trong khối Baiviet có các khối bài viết con, ta gọi nó là baiviet_child

(Xem ví dụ)

Bước 4: Thêm các phần tử nội dung và định dạng cho khối container, header, footer

Sau khi đã phân tích xong các khối chính của Layout, ta thêm các phần tử nội dung như: danh sách menu, các bài viết, bản quyền,... và định dạng cho các khối đơn giản như container, header, footer (Xem ví dụ)

Bước 5: Định dạng cho khối Content

Ta thiết lập khối Menu chiều rộng 35%, khối Baiviet 65% và đẩy chúng sang trái để có thể nằm trên cùng một hàng

Ta thiết lập thuộc tính overflow:auto cho khối Content để nó có thể chứa 2 khối Menu, Baiviet

(Xem ví dụ)

Bước cuối: Định dạng cho khối menu_child, baiviet_child và các chi tiết lặt vặt

(Xem ví dụ)