[BÀI 14]Kỹ thuật Clearfix trong CSS

Kỹ thuật Clearfix trong CSS

Clearfix trong CSS không phải là một thuộc tính, mà nó là một kỹ thuật để loại bỏ ảnh hưởng của float lên các vùng.

  1. Clearfix là gì?

Khi một thẻ cha có thẻ con sử dụng float thì chiều cao của thẻ cha so với thẻ con đó là 0px. Chiều cao của thẻ cha chỉ phụ thuộc vào thẻ nào không có float.

Float là thuộc tính dùng để đẩy nội dung qua bên trái hoặc phải.

Ví dụ 1 : Thẻ cha không có thẻ con không có float

Kết quả :

1

Ví dụ 2 : Thẻ cha có thẻ con không có float

Kết quả :

2

Chiều cao thẻ ‘father’ sẽ phụ thuộc vào thẻ ‘no_float’. Nhưng phần viền của thẻ cha bị nội dung của 2 thẻ ‘left’ và ‘right’ đè lên. Vậy kỹ thuật dùng CSS để điều chỉnh cho chiều cao của thẻ cha bằng chiều cao của mọi thẻ con gọi là kỹ thuật Clearfix trong CSS

  1. Thực hành Clearfix.

Yêu cầu xây dựng một layout bố cục như sau :

0

Bước 1 :

Xây dựng 1 file HTMl như sau :

Kết quả :

3

 

Ta thấy phần màu xanh đã bị 2 phần ‘left’ và ‘right’ đè lên.

Phần giao tiếp của phần màu vàng và phần border của thẻ cha chính là phần after của thẻ ‘father1’.

Chạy đoạn code sau :

Kết quả :

6

 

Vậy để phần màu vàng không bị đè bởi 2 phần trái, phải nữa ta thêm thuộc tính clear : both và sử dụng display : block vào phần after của thẻ father1.

Code :

Kết quả :

4

Để xóa đi phần dư của after ta cho chiều cao và chiều rộng của after = 0;

Code :

Kết quả :

5

Hoàn toàn đúng như yêu cầu.

Nếu chưa hiểu rõ, các bạn có thể tham khảo các khóa học tại đây.

Chúc các bạn thành công !!!