Tùy thuộc vào thiết kế được sản xuất, mỗi giải pháp CSS rõ ràng dưới đây đều có những lợi ích riêng.
Clearfix có các ứng dụng hữu ích nhưng nó cũng đã được sử dụng như một bản hack. Trước khi bạn sử dụng một Clearfix, có lẽ các giải pháp css hiện đại này có thể hữu ích:
Giải pháp Clearfix hiện đại
Container với overflow: auto;
Cách đơn giản nhất để xóa các phần tử nổi là sử dụng kiểu overflow: autotrên phần tử chứa. Giải pháp này hoạt động trong mọi trình duyệt hiện đại.
<div style="overflow: auto;">
<img
style="float: right;"
src="path/to/floated-element.png"
width="500"
height="500"
>
<p>Your content here…</p>
</div>
Một nhược điểm, sử dụng một số kết hợp lề và phần đệm nhất định trên phần tử bên ngoài có thể khiến thanh cuộn xuất hiện nhưng điều này có thể được giải quyết bằng cách đặt lề và phần đệm trên phần tử chứa cha mẹ khác.
Sử dụng 'overflow: hidden' cũng là một giải pháp Clearfix, nhưng sẽ không có thanh cuộn, tuy nhiên việc sử dụng hiddensẽ cắt bất kỳ nội dung nào được đặt bên ngoài phần tử chứa.
Lưu ý: Phần tử nổi là một imgthẻ trong ví dụ này, nhưng có thể là bất kỳ phần tử html nào.
Clearfix được tải lại
Thierry Koblentz trên CSSMojo đã viết: Clearfix mới nhất được tải lại . Ông lưu ý rằng bằng cách bỏ hỗ trợ cho oldIE, giải pháp có thể được đơn giản hóa thành một câu lệnh css. Ngoài ra, sử dụng display: block(thay vì display: table) cho phép lề thu gọn đúng cách khi các phần tử có Clearfix là anh em ruột.
.container::after {
content: "";
display: block;
clear: both;
}
Đây là phiên bản hiện đại nhất của Clearfix.
⋮
⋮
Giải pháp Clearfix cũ hơn
Các giải pháp dưới đây không cần thiết cho các trình duyệt hiện đại, nhưng có thể hữu ích cho việc nhắm mục tiêu các trình duyệt cũ hơn.
Lưu ý rằng các giải pháp này phụ thuộc vào lỗi trình duyệt và do đó chỉ nên được sử dụng nếu không có giải pháp nào ở trên phù hợp với bạn.
Chúng được liệt kê đại khái theo thứ tự thời gian.
"Beat That ClearFix", một thuật ngữ rõ ràng cho các trình duyệt hiện đại
Thierry Koblentz' của CSS Mojo đã chỉ ra rằng khi nhắm mục tiêu các trình duyệt hiện đại, chúng tôi bây giờ có thể thả zoomvà ::beforesở hữu / giá trị và chỉ cần sử dụng:
.container::after {
content: "";
display: table;
clear: both;
}
Giải pháp này không hỗ trợ cho IE 6/7 trên mục đích!
Thierry cũng đưa ra: " Một lời cảnh báo : nếu bạn bắt đầu một dự án mới từ đầu, hãy thực hiện nó, nhưng đừng trao đổi kỹ thuật này với kỹ thuật hiện tại của bạn, bởi vì mặc dù bạn không hỗ trợ oldIE, nhưng các quy tắc hiện tại của bạn sẽ ngăn chặn lợi nhuận bị sụp đổ. "
Micro Clearfix
Giải pháp Clearfix gần đây nhất và được áp dụng trên toàn cầu, Micro Clearfix của Nicolas Gallagher .
Hỗ trợ được biết đến: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+
.container::before, .container::after {
content: "";
display: table;
}
.container::after {
clear: both;
}
.container {
zoom: 1;
}
Tài sản tràn
Phương pháp cơ bản này được ưa thích cho trường hợp thông thường, khi nội dung được định vị sẽ không hiển thị bên ngoài giới hạn của vùng chứa.
http://www.quirksmode.org/css/clear.html
- giải thích cách giải quyết các vấn đề phổ biến liên quan đến kỹ thuật này, cụ thể là, cài đặt width: 100%trên container.
.container {
overflow: hidden;
display: inline-block;
display: block;
}
Thay vì sử dụng thuộc displaytính để đặt "hasLayout" cho IE, các thuộc tính khác có thể được sử dụng để kích hoạt "hasLayout" cho một phần tử .
.container {
overflow: hidden;
zoom: 1;
display: block;
}
Một cách khác để xóa phao bằng cách sử dụng thuộc overflowtính là sử dụng hack gạch dưới . IE sẽ áp dụng các giá trị có tiền tố gạch dưới, các trình duyệt khác thì không. Các zoomkích hoạt thuộc tính hasLayout trong IE:
.container {
overflow: hidden;
_overflow: visible; /* for IE */
_zoom: 1; /* for IE */
}
Trong khi điều này hoạt động ... nó không lý tưởng để sử dụng hack.
PIE: Phương pháp xóa dễ dàng
Phương pháp "Xóa dễ dàng" cũ này có ưu điểm là cho phép các phần tử được định vị treo bên ngoài giới hạn của vùng chứa, với chi phí CSS phức tạp hơn.
Giải pháp này khá cũ, nhưng bạn có thể tìm hiểu tất cả về Xóa dễ dàng trên vị trí là tất cả: http://www.poseitioniseverything.net/easyclear.html
Phần tử sử dụng thuộc tính "xóa"
Giải pháp nhanh và bẩn (với một số nhược điểm) khi bạn nhanh chóng tát một cái gì đó cùng nhau:
<br style="clear: both" /> <!-- So dirty! -->
Hạn chế
- Nó không phản hồi và do đó có thể không cung cấp hiệu ứng mong muốn nếu kiểu bố cục thay đổi dựa trên các truy vấn phương tiện. Một giải pháp trong CSS thuần là lý tưởng hơn.
- Nó thêm đánh dấu html mà không nhất thiết phải thêm bất kỳ giá trị ngữ nghĩa.
- Nó đòi hỏi một định nghĩa và giải pháp nội tuyến cho từng trường hợp chứ không phải là một tham chiếu lớp cho một giải pháp duy nhất của một Clearfix rõ ràng trong css và các tham chiếu lớp đến nó trong html.
- Nó làm cho mã khó làm việc với người khác vì họ có thể phải viết nhiều bản hack hơn để làm việc xung quanh nó.
- Trong tương lai khi bạn cần / muốn sử dụng một giải pháp Clearfix khác, bạn sẽ không phải quay lại và xóa mọi
<br style="clear: both" />thẻ nằm rải rác xung quanh đánh dấu.
