Rõ ràng là gì?

Gần đây tôi đã xem qua mã của một số trang web và thấy rằng mỗi người đều <div> có một lớp clearfix.

Sau khi tìm kiếm nhanh trên Google, đôi khi tôi biết rằng nó dành cho IE6, nhưng thực sự thì đó là gì?

Bạn có thể cung cấp một số ví dụ về bố cục có mã xóa, so với bố cục không có mã xóa?

Nếu bạn không cần hỗ trợ IE9 hoặc thấp hơn, bạn có thể sử dụng flexbox một cách tự do và không cần sử dụng bố cục nổi.

Điều đáng chú ý là ngày nay, việc sử dụng các yếu tố nổi để bố trí ngày càng trở nên chán nản hơn với việc sử dụng các giải pháp thay thế tốt hơn.

• display: inline-block - Tốt hơn
• Flexbox - Tốt nhất (nhưng hỗ trợ trình duyệt hạn chế)

Flexbox được hỗ trợ từ Firefox 18, Chrome 21, Opera 12.10 và Internet Explorer 10, Safari 6.1 (bao gồm cả Safari di động) và trình duyệt mặc định của Android 4.4.

Để biết danh sách trình duyệt chi tiết, hãy xem: https://caniuse.com/flexbox .

(Có lẽ một khi vị trí của nó được thiết lập hoàn toàn, nó có thể là cách tuyệt đối được đề xuất để đặt ra các yếu tố.)

Clearfix là một cách để một phần tử tự động xóa các phần tử con của nó , do đó bạn không cần thêm đánh dấu bổ sung. Nó thường được sử dụng trong bố trí float nơi các phần tử được thả nổi được xếp theo chiều ngang.

Clearfix là một cách để chống lại vấn đề container có chiều cao bằng không đối với các phần tử nổi

Một Clearfix được thực hiện như sau:

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

Hoặc, nếu bạn không yêu cầu hỗ trợ IE <8, điều sau đây cũng tốt:

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

Thông thường bạn sẽ cần phải làm một cái gì đó như sau:

<div>
    <div style="float: left;">Sidebar</div>
    <div style="clear: both;"></div> <!-- Clear the float -->
</div>

Với Clearfix, bạn chỉ cần những điều sau đây:

<div class="clearfix">
    <div style="float: left;" class="clearfix">Sidebar</div>
    <!-- No Clearing div! -->
</div>

Đọc về nó trong bài viết này - bởi Chris Coyer @ CSS-Tricks

Các câu trả lời khác là chính xác. Nhưng tôi muốn nói thêm rằng đó là một di tích về thời gian khi mọi người lần đầu tiên học CSS và bị lạm dụng floatđể làm tất cả bố cục của họ. floatcó nghĩa là để làm những thứ như hình ảnh nổi bên cạnh dòng văn bản dài, nhưng nhiều người đã sử dụng nó làm cơ chế bố cục chính của họ. Vì nó không thực sự có ý nghĩa cho điều đó, bạn cần các bản hack như "Clearfix" để làm cho nó hoạt động.

Ngày nay display: inline-blocklà một sự thay thế vững chắc ( ngoại trừ IE6 và IE7 ), mặc dù các trình duyệt hiện đại hơn đang đến với các cơ chế bố trí thậm chí hữu ích hơn dưới các tên như flexbox, bố cục lưới, v.v.

Việc clearfixcho phép một container để bọc trẻ em nổi của nó. Không có clearfixkiểu dáng tương đương hoặc tương đương, một thùng chứa không quấn quanh những đứa trẻ nổi của nó và sụp đổ, giống như những đứa trẻ nổi của nó được định vị tuyệt đối.

Có một số phiên bản của Clearfix, với Nicolas Gallagher và Thierry Koblentz là tác giả chính.

Nếu bạn muốn hỗ trợ cho các trình duyệt cũ hơn, tốt nhất nên sử dụng mã xóa này:

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

Trong SCSS, bạn có thể sử dụng kỹ thuật sau:

%clearfix {
    &:before, &:after {
        content:" ";
        display:table;
    }

    &:after {
        clear:both;
    }

    & {
        *zoom:1;
    }
}

#clearfixedelement {
    @extend %clearfix;
}

Nếu bạn không quan tâm đến việc hỗ trợ các trình duyệt cũ hơn, sẽ có phiên bản ngắn hơn:

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

Để cung cấp một bản cập nhật về tình hình vào quý 2 năm 2017.

Thuộc tính hiển thị CSS3 mới có sẵn trong Firefox 53, Chrome 58 và Opera 45.

.clearfix {
   display: flow-root;
}

Kiểm tra tính khả dụng cho bất kỳ trình duyệt nào tại đây: http://caniuse.com/#feat=flow-root

Phần tử (với thuộc tính hiển thị được đặt thành root-Flow) tạo ra một hộp chứa khối và đặt ra nội dung của nó bằng cách sử dụng bố trí luồng. Nó luôn thiết lập một bối cảnh định dạng khối mới cho nội dung của nó.

Có nghĩa là nếu bạn sử dụng div cha có chứa một hoặc một số con nổi, thuộc tính này sẽ đảm bảo cha mẹ bao quanh tất cả các con của nó. Không cần bất kỳ hack nào. Trên bất kỳ đứa trẻ nào, thậm chí không phải là một yếu tố giả cuối cùng (nếu bạn đang sử dụng biến thể Clearfix với: trước trên những đứa trẻ cuối cùng).

.container {
  display: flow-root;
  background-color: Gainsboro;
}

.item {
  border: 1px solid Black;
  float: left;
}

.item1 {  
  height: 120px;
  width: 120px;
}

.item2 {  
  height: 80px;
  width: 140px;
  float: right;
}

.item3 {  
  height: 160px;
  width: 110px;
}

<div class="container">
  This container box encloses all of its floating children.
  <div class="item item1">Floating box 1</div>
  <div class="item item2">Floating box 2</div> 
  <div class="item item3">Floating box 3</div>  
</div>

Nói một cách đơn giản, Clearfix là một hack .

Đó là một trong những điều xấu xí mà tất cả chúng ta phải sống vì đó thực sự là cách hợp lý duy nhất để đảm bảo các yếu tố trẻ em trôi nổi không tràn ngập cha mẹ chúng. Có các sơ đồ bố trí khác ngoài kia nhưng nổi là quá phổ biến trong thiết kế / phát triển web ngày nay để bỏ qua giá trị của hack Clearfix.

Cá nhân tôi nghiêng về giải pháp Micro Clearfix (Nicolas Gallagher)

.container:before,
.container:after {
  content:"";
  display:table;
}
.container:after {
  clear:both;
}
.container {
  zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

tài liệu tham khảo

Một kỹ thuật thường được sử dụng trong bố cục dựa trên phao CSS là gán một số thuộc tính CSS cho một phần tử mà bạn biết sẽ chứa các phần tử nổi. Kỹ thuật, thường được triển khai bằng cách sử dụng một định nghĩa lớp được gọi clearfix, (thường) thực hiện các hành vi CSS sau:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    zoom: 1
}

Mục đích của các hành vi kết hợp này là tạo ra một thùng chứa :afterphần tử hoạt động chứa một '.' được đánh dấu là ẩn sẽ xóa tất cả các số float hiện có và thiết lập lại trang một cách hiệu quả cho phần nội dung tiếp theo.

Tùy chọn khác (và có lẽ đơn giản nhất) để đạt được một Clearfix là sử dụng overflow:hidden;trên phần tử chứa. Ví dụ

.parent {
  background: red;
  overflow: hidden;
}
.segment-a {
  float: left;
}
.segment-b {
  float: right;
}

<div class="parent">
  <div class="segment-a">
    Float left
  </div>
  <div class="segment-b">
    Float right
  </div>
</div>

Tất nhiên điều này chỉ có thể được sử dụng trong trường hợp bạn không bao giờ muốn nội dung bị tràn.

Tôi đã thử câu trả lời được chấp nhận nhưng tôi vẫn gặp vấn đề với việc căn chỉnh nội dung. Thêm bộ chọn ": trước" như hiển thị bên dưới đã khắc phục sự cố:

// LESS HELPER
.clearfix()
{
    &:after, &:before{
       content: " "; /* Older browser do not support empty content */
       visibility: hidden;
       display: block;
       height: 0;
       clear: both;
    }
}

LESS ở trên sẽ biên dịch sang CSS bên dưới:

clearfix:after,
clearfix:before {
  content: " ";
  /* Older browser do not support empty content */
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

Đây là một phương pháp khác nhau giống nhau nhưng một chút khác biệt

sự khác biệt là dấu chấm nội dung được thay thế bằng a \00A0==whitespace

Thông tin thêm về điều này http://www.jqui.net/tips-tricks/css-clearfix/

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix{ display: inline-block;}
html[xmlns] .clearfix { display: block;}
* html .clearfix{ height: 1%;}
.clearfix {display: block}

Đây là một phiên bản nhỏ gọn của nó ...

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;width:0;font-size: 0px}.clearfix{ display: inline-block;}html[xmlns] .clearfix { display: block;}* html .clearfix{ height: 1%;}.clearfix {display: block}