Hiểu rõ ràng lớp học của Bootstrap

Question

.clearfix { 
    *zoom: 1; 
    &:before, 
    &:after { 
    display: table; 
    content: ""; 
    // Fixes Opera/contenteditable bug: 
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 
    line-height: 0; 
    } 
    &:after { 
    clear: both; 
    } 
} 

1. Tại sao không sử dụng display:block?
2. Ngoài ra, tại sao nó cũng áp dụng cho kính giả ::before?

Answer 1

.clearfix được xác định trong less/mixins.less. Ngay trên định nghĩa của nó là một lời nhận xét với một liên kết đến bài viết này:

A new micro clearfix hack

Bài báo giải thích cách hoạt động của nó.

CẬP NHẬT: Có, câu trả lời chỉ liên kết là không hợp lệ. Tôi biết điều này ngay cả khi tôi đăng câu trả lời này, nhưng tôi không cảm thấy như sao chép và dán là OK do bản quyền, đạo văn, và những gì có bạn. Tuy nhiên, bây giờ tôi cảm thấy như nó OK vì tôi đã liên kết với bài viết gốc. Tôi cũng nên đề cập đến tên của tác giả, mặc dù, cho tín dụng: Nicolas Gallagher. Dưới đây là thịt của bài viết (lưu ý rằng "phương pháp Thierry của" là đề cập đến Thierry Koblentz’s “clearfix reloaded”):

này “vi clearfix” tạo giả thành phần và đặt họ display để table. Điều này tạo ra một anonymous table-cell và một ngữ cảnh định dạng chặn mới có nghĩa là :before phần tử giả ngăn chặn sự sụp đổ trên cùng của lề. Phần tử giả :after được sử dụng để xóa các phao. Do đó, không cần ẩn bất kỳ nội dung nào được tạo ra và tổng số mã cần thiết sẽ bị giảm.

Bao gồm các selector :before là không cần thiết để xóa nổi, nhưng nó ngăn trên lề từ sụp đổ trong trình duyệt hiện đại. Điều này có hai lợi ích:

• Nó đảm bảo tính nhất quán hình ảnh với các kỹ thuật ngăn chặn phao khác tạo ra một bối cảnh khối định dạng mới, ví dụ như, overflow:hidden

• Nó đảm bảo tính nhất quán trực quan với IE 6/7 khi zoom:1 là được áp dụng.

N.B.: Có những trường hợp trong đó IE 6/7 sẽ không chứa các lề dưới của phao nổi trong một bối cảnh định dạng khối mới. Các chi tiết khác có thể tìm thấy tại đây: Better float containment in IE using CSS expressions.

Việc sử dụng content:" " (lưu ý không gian trong chuỗi nội dung) tránh một Opera bug tạo ra không gian xung quanh các yếu tố clearfixed nếu thuộc tính contenteditable cũng có mặt ở đâu đó trong HTML. Cảm ơn Sergio Cerrutti vì đã khắc phục sự cố này. Sửa chữa thay thế là để sử dụng font:0/0 a.

Legacy Firefox

Firefox < 3.5 sẽ được hưởng lợi từ việc sử dụng phương pháp Thierry với việc bổ sung của visibility:hidden để ẩn các nhân vật chèn vào. Đây là vì các phiên bản di sản của Firefox cần content:"." để tránh thêm không gian xuất hiện giữa body và phần tử con đầu tiên của mình, trong những hoàn cảnh nhất định (ví dụ, jsfiddle.net/necolas/K538S/.)

phương pháp float-ngăn chặn thay thế mà tạo ra một khối mới ngữ cảnh định dạng, chẳng hạn như áp dụng overflow:hidden hoặc display:inline-block vào phần tử vùng chứa, cũng sẽ tránh hành vi này trong các phiên bản cũ của Firefox.

Answer 2

Yếu tố :before giả là không cần thiết cho bản thân clearfix hack.

Nó chỉ là một tính năng bổ sung thú vị giúp ngăn chặn margin-collapsing của phần tử con đầu tiên. Do đó, lề trên của phần tử khối con của phần tử "clearfixed" được đảm bảo được đặt bên dưới đường viền trên cùng của phần tử được cố định.

display:table đang được sử dụng vì display:block không thực hiện thủ thuật. Sử dụng display:block lề sẽ bị thu gọn ngay cả với phần tử :before.

Có một báo trước: nếu vertical-align:baseline được sử dụng trong ô bảng có các phần tử <div> được làm rõ ràng, Firefox sẽ không được căn chỉnh tốt. Sau đó, bạn có thể thích sử dụng display:block mặc dù mất tính năng chống sụp đổ. Trong trường hợp đọc thêm bài viết này: Clearfix interfering with vertical-align.

Answer 3

Khi một clearfix được sử dụng trong vùng chứa mẹ, nó sẽ tự động bao quanh tất cả các phần tử con.

Nó thường được sử dụng sau các phần tử nổi để xóa bố cục nổi.

Khi bố cục nổi được sử dụng, nó sẽ căn chỉnh theo chiều ngang các phần tử con. Clearfix xóa hành vi này.

Ví dụ - Bootstrap Panels

Trong bootstrap, khi bảng điều khiển lớp được sử dụng, có 3 loại con: bảng điều khiển-header, bảng điều khiển thân, bảng điều khiển-footer. Tất cả đều có hiển thị: bố trí khối nhưng bảng điều khiển-thân có một tiền tố được áp dụng trước. bảng điều khiển-cơ thể là một loại container chính trong khi bảng điều khiển-header & panel-footer không được dự định là một container, nó chỉ là nhằm giữ một số văn bản cơ bản.

Nếu phần tử nổi được thêm vào, vùng chứa mẹ không được bao quanh các phần tử đó vì chiều cao của các phần tử thả nổi không được thừa kế bởi vùng chứa chính.

Vì vậy, đối với bảng đầu trang & chân trang, cần có clearfix để xóa bố cục nổi của các phần tử: Lớp Clearfix cho hình ảnh trực quan rằng chiều cao của vùng chứa mẹ đã được tăng lên để chứa tất cả các phần tử con của nó.

<div class="container"> 
    <div class="panel panel-default"> 
     <div class="panel-footer"> 
      <div class="col-xs-6"> 
       <input type="button" class="btn btn-primary" value="Button1"> 
       <input type="button" class="btn btn-primary" value="Button2"> 
       <input type="button" class="btn btn-primary" value="Button3"> 
      </div> 
     </div> 
    </div> 

    <div class="panel panel-default"> 
     <div class="panel-footer"> 
      <div class="col-xs-6"> 
       <input type="button" class="btn btn-primary" value="Button1"> 
       <input type="button" class="btn btn-primary" value="Button2"> 
       <input type="button" class="btn btn-primary" value="Button3"> 
      </div> 
      <div class="clearfix"/> 
     </div> 
    </div> 
</div>