Lớp clearfix làm gì trong css?

Question

Tôi đã thấy các thẻ div sử dụng lớp clearfix khi đó là con divs sử dụng thuộc tính float. Lớp clearfix trông như thế này:

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

Tôi thấy rằng nếu tôi không sử dụng clearfix khi tôi sử dụng bottom-border tài sản, biên giới sẽ hiển thị bên trên con divs. Ai đó có thể giải thích những gì lớp clearfix không? Ngoài ra, tại sao có hai thuộc tính display? Điều đó có vẻ rất lạ với tôi. Tôi đặc biệt tò mò về ý nghĩa của phương tiện content:'.'.

Cảm ơn, G

Answer 1

Làm thế nào nổi việc

Khi yếu tố nổi tồn tại trên trang web, không nổi yếu tố quấn quanh các yếu tố nổi, tương tự như văn bản đi bao quanh một hình ảnh trên một tờ báo. Từ góc độ tài liệu (mục đích ban đầu của HTML), đây là cách hoạt động của phao.

float vs display:inline

Trước khi phát minh ra display:inline-block, các trang web sử dụng float để thiết lập các yếu tố bên cạnh nhau. float được ưu tiên hơn display:inline vì sau này, bạn không thể đặt kích thước (chiều rộng và chiều cao) của phần tử cũng như phần đệm dọc (trên cùng và dưới) - các phần tử nổi có thể làm vì chúng được coi là phần tử khối.

vấn đề nổi

Vấn đề chính là chúng ta đang sử dụng float chống lại mục đích của nó.

Một điều khác là trong khi float cho phép các phần tử cấp khối cạnh nhau, phao không truyền đạt hình dạng cho vùng chứa của nó. Nó giống như position:absolute, trong đó phần tử "được lấy ra khỏi bố cục". Ví dụ: khi một vùng chứa trống chứa nổi 100px x 100px <div>, thì <div> sẽ không truyền đạt chiều cao 100px cho vùng chứa.

Không giống như position:absolute, nó ảnh hưởng đến nội dung bao quanh nó. Nội dung sau phần tử lưu hành sẽ "bọc" xung quanh phần tử. Nó bắt đầu bằng cách vẽ bên cạnh nó và sau đó bên dưới nó, giống như cách văn bản báo chí sẽ chảy xung quanh một hình ảnh.

clearfix để giải cứu

gì clearfix làm là để buộc nội dung sau khi phao hoặc container chứa nổi để render dưới nó. Có rất nhiều phiên bản để sửa lỗi rõ ràng, nhưng nó có tên từ phiên bản thường được sử dụng - phiên bản sử dụng thuộc tính CSS clear.

Ví dụ

Here are several ways to do clearfix, tùy thuộc vào trình duyệt và trường hợp sử dụng. Người ta chỉ cần biết cách sử dụng thuộc tính clear trong CSS và cách hiển thị nổi trong mỗi trình duyệt để đạt được bản sửa lỗi rõ ràng trên trình duyệt chéo hoàn hảo.

Những gì bạn có

Kiểu được cung cấp của bạn là một dạng clearfix có khả năng tương thích ngược. I found an article về clearfix này. Nó chỉ ra, đó là một clearfix OLD - vẫn phục vụ các trình duyệt cũ. Có một phiên bản mới hơn, sạch hơn trong bài viết này. Đây là sự cố:

• Các clearfix trước hết bạn phải gắn thêm một giả yếu tố vô hình, đó là kiểu clear:both, giữa các yếu tố mục tiêu và các yếu tố tiếp theo. Điều này buộc phần tử giả hiển thị bên dưới mục tiêu và phần tử tiếp theo bên dưới phần tử giả.

• Loại thứ hai nối phong cách display:inline-block không được trình duyệt trước đó hỗ trợ. inline-block giống như nội tuyến nhưng cung cấp cho bạn một số thuộc tính chặn các phần tử, như chiều rộng, chiều cao cũng như đệm dọc. Điều này đã được nhắm mục tiêu cho IE-MAC.

• Đây là lần đăng ký lại display:block do quy tắc IE-MAC ở trên. Quy tắc này đã bị "ẩn" khỏi IE-MAC.

Tất cả trong tất cả, 3 quy tắc này giữ nguyên trình duyệt chéo, với trình duyệt cũ.

Answer 2

Khi một yếu tố, chẳng hạn như một div là floated, container mẹ của nó không còn xem xét chiều cao của nó, ví dụ:

<div id="main"> 
    <div id="child" style="float:left;height:40px;"> Hi</div> 
</div> 

Các thùng phụ huynh sẽ không được là 40 pixel cao theo mặc định. Điều này gây ra rất nhiều kỳ quặc nhỏ lạ nếu bạn đang sử dụng các container để bố trí cấu trúc.

Vì vậy, lớp clearfix rằng nhiều khuôn khổ khác nhau sử dụng khắc phục sự cố này bằng cách đặt vùng chứa chính "thừa nhận" các phần tử được chứa.

Ngày này sang ngày khác, tôi thường chỉ sử dụng các khung như 960gs, Twitter Bootstrap để đặt ra và không làm phiền với cơ học chính xác.

có thể đọc thêm ở đây

http://www.webtoolkit.info/css-clearfix.html

Answer 3

clearfix cũng giống như overflow:hidden. Cả hai trẻ em được thả nổi rõ ràng của bố mẹ, nhưng clearfix sẽ không cắt bỏ phần tử tràn vào số parent. Nó cũng hoạt động trong IE8 & ở trên.

Không cần phải xác định "." trong nội dung & .clearfix.Chỉ cần viết như thế này:

.clr:after { 
    clear: both; 
    content: ""; 
    display: block; 
} 

HTML

<div class="parent clr"></div> 

đọc những liên kết này để biết thêm

http://css-tricks.com/snippets/css/clear-fix/,

What methods of ‘clearfix’ can I use?