CSS 23 – Kỹ thuật clearfix trong CSS

0
146

Trong bài tìm hiểu thuộc tính float thì mình có sử dụng sơ qua về kỹ thuật ClearFix này rồi nhưng không chi tiết lắm, vì vậy trong bài này mình sẽ trình bày một cách chi tiết và cụ thể hơn. Trong bài mình có sử dụng after và before trong CSS nữa nên nếu bạn chưa biết thì quay lại bài đó đọc nhé.

Clearfix là gì?

Clearfix không phải là thuộc tính, mà nó là 1 thủ thuật kết hợp nhiều thuộc tính khác nhau nhằm tạo vùng không gian tạm thay thế vùng không gian bị giải phòng khi thành phần sử dụng float.

Khi thành phần có sử dụng float, thì thành phần đó sẽ dễ dàng điều khiển các thuộc tính box model là padding và margin chính xác hơn vì gốc tính padding và margin sẽ không còn bị ảnh hưởng bởi thuộc tính float.

Clearfix trong CSS

Cấu trúc

Ví dụ

Chúng ta sẽ chuẩn bị 1 giao diện với HTML như sau:

Để dễ hình dung thủ thuật clearfix, ta sẽ cho thành phần <div> và 3 thành phần <p> có nội dung CSS như sau, với thành phần A có sử dụng float: left; và thành phần B có sử dụng thuộc tính float: right;

Do thành phần A và thành phần B có sử dụng float nên nếu còn vùng không gian trống, thành phần C sẽ lập tức chiếm chỗ, chính vì vậy mà ta có giao diện như sau:

Sử dụng clear: both

Trước khi phân tích clearfix, ta hãy sử dụng thử thuộc tính clear: both; để xem các thành phần như thế nào:

clear: both;

Ta thấy khi sử dụng clear: both; thành phần sẽ ngăn chặn, không nhảy lên chiếm vùng không gian của 2 thành phần float ở trên, tuy nhiên thành phần C vẫn còn ảnh hưởng bởi thuộc tính float, bằng chứng là chúng ta sẽ không thể sử dụng padding hoặc margin như ý muốn được, xem ví dụ sau để thấy rõ điều đó:

Do sử dụng clear: both; thành phần sẽ ngăn chặn không chiếm vùng không gian, tuy nhiên thành phần vẫn chịu ảnh hưởng của float, nên mốc tính padding hay margin vẫn được tính như chưa sử dụng clear: both;, do đó ta thấy tuy thành phần đã sử dụng margin-top: 20px;, nhưng thành phần vẫn không dịch chuyển xuống bên dưới 20px, để giải quyết vấn đề này chúng ta sẽ sử dụng thủ thuật clearfix.

Thủ thuật clearfix

Thực ra clearfix là cách tạo thêm một thành phần tạm nằm bên dưới thành phần sử dụng float, mục đích là kéo trả lại vùng không gian cho thành phần sử dụng float, sau đó ẩn thành phần tạm này đi.

Trước tiên ta sẽ sử dụng bộ chọn after kết hợp với thuộc tính content để tạo thành phần tạm này:

Ta thấy thuộc tính content: “.”; sẽ thêm dấu “chấm” vào thành phần, bộ chọn :after sẽ chọn ngay sau thành phần, kết hợp bộ chọn :after và thuộc tính content: “.”; sẽ cho ta một dấu “chấm” ngay sau thành phần, tuy nhiên dấu “chấm” này vẫn chưa tạo được vùng không gian tạm, vì dấu “chấm” bị ảnh hưởng của thuộc tính float nên dấu “chấm” vẫn nhảy lên chiếm vùng không gian trống, chúng ta sẽ sử dụng thuộc tính clear: both; cho dấu “chấm” để ngăn cản sự ảnh hưởng của float, đồng thời sử dụng thuộc tính display: block; để biến dấu “chấm” thành nhóm block.

Ta thấy yêu cầu ban đầu gần như đã đạt được, vấn đề còn lại là dấu “chấm”, làm sao để giấu được dấu “chấm” thì ta đã hoàn thành được yêu cầu ban đầu, để giấu dấu “chấm” chúng ta có thể sử dụng một số thuộc tính sau:

height: 0; /* Chieu cao cua thanh phan bang 0 */ line-height: 0; /* Khoang cach cua dong` bang 0 */ visibility: hidden; /* Xac dinh thanh phan khong dc nhin thay */

Kết quả trên có được là do ta đã cho vùng không gian và vùng hiển thị của dấu “chấm” bằng không, sau đó ta giấu dấu chấm bằng thuộc tính visibility: hidden;, đến đây gần như ta đã hoàn thành được clearfix, tuy nhiên trình duyệt Internet Explorer phiên bản 6 và 7 hiển thị không giống như các trình duyệt khác, chúng ta sẽ sử dụng thuộc tính zoom: 1; để trình duyệt Internet Explorer phiên bản 6 và 7 hiển thị như các trình duyệt khác.

zoom: 1;

Tới đây chúng ta đã hoàn thành thủ thuật clearfix. Kết quả như sau:

Kết luận

Vậy là bạn đã hiểu được kỹ thuật ClearFix trong CSS rồi đúng không nào, đây là một kỹ thuật khá hay và quan trọng mà bạn cần nắm bắt để sau này đi làm có lúc người ta phỏng vấn sẽ đề cập đến.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây