Clearfix là cách để một phần tử tự động xóa hoặc sửa các phần tử của nó để nó không cần thêm đánh dấu bổ sung. Nó thường được sử dụng trong bố cục float trong đó các phần tử được thả nổi để xếp chồng lên nhau theo chiều ngang. Nếu phần tử cao hơn phần tử chứa nó thì hãy sử dụng thuộc tính tràn của CSS bằng cách đặt giá trị của nó là tự động để khắc phục và khắc phục sự cố

Thí dụ. Từ hình ảnh bên dưới, logo không vừa với phần tử div. Để khắc phục vấn đề này, có hai cách. Đầu tiên là bằng cách tăng chiều cao của khối div và thứ hai bằng cách sử dụng thuộc tính Clearfix CSS

Nếu bạn không cần hỗ trợ IE9 trở xuống, bạn có thể sử dụng flexbox thoải mái 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 phần tử nổi cho bố cục ngày càng không được khuyến khích bằng việc sử dụng các phần tử 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 Mobile Safari) 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 hoàn toàn được khuyến nghị để bố trí các yếu tố. )

Clearfix là 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ố cục float nơi các phần tử được thả nổi để xếp chồng lên nhau theo chiều ngang

Trong thế giới thiết kế web, việc sắp xếp các phần tử HTML vừa phải luôn là một vấn đề đáng quan tâm. Đôi khi quá trình đó diễn ra suôn sẻ với CSS hoàn hảo và những lần khác, chỉ có một yếu tố từ chối đi cùng với phần còn lại.  

Rất may, có các phương pháp CSS được thiết kế để trợ giúp những vấn đề như thế này. Một trong những tùy chọn đó là việc sử dụng thuộc tính "clearfix". Khái niệm này được gọi là hack trong một số vòng kết nối và mã hóa thông minh ở những người khác.  

Cho dù bạn có thể đăng ký trại nào, đó là một công cụ hiệu quả được thiết kế để trợ giúp với các yếu tố nổi. Cụ thể là những cái được đặt ngay cạnh nhau trên trang HTML. Trong hướng dẫn ngắn gọn này, bạn sẽ học cách sử dụng thuộc tính Clearfix trong CSS để xử lý các tình huống như vậy

Hiểu khi nào nên sử dụng thuộc tính Clearfix

Đi thẳng vào các khái niệm kỹ thuật, thuộc tính Clearfix có cách sử dụng rất cụ thể đối với nhà thiết kế. Khi một phần tử HTML được đặt thành “nổi” trên một trang, nó sẽ mang lại cảm giác định vị trong bố cục trang web.  

Ví dụ, một phần tử nổi có thể được yêu cầu thả nổi sang trái hoặc phải. Đầu vào định hướng này thông báo cho các phần tử HTML khác về cách tương tác với nó. Để hiểu rõ hơn về điều này và thuộc tính Clearfix sẽ ảnh hưởng đến nó như thế nào, bạn có thể thiết lập một trang HTML mẫu để hoạt động trên đó.

mã mẫu được cung cấp dưới đây. Bạn có thể làm theo hoặc xây dựng của riêng bạn

    
        
        
       
    
     
      
Udacity: CSS Clearfix Property
      
I am div number 1
      
I am div number 2
     

Điều này sẽ cung cấp đầu ra cơ bản sau trên trang HTML

Với một số CSS cơ bản như minh họa bên dưới, trang sẽ có hai div được tô sáng.

#div1{
    border-style: solid;
    border-color: black;
    border-width: 12px;
}
 
#div2{
    border-style: solid;
    border-color: red;
    border-width: 12px;
}

Điều này cung cấp cho bạn đầu ra sau

Để hiểu cách thuộc tính float có thể thay đổi giao diện, giá trị của float left sẽ được áp dụng cho div đầu tiên.

#div1{
    border-style: solid;
    border-color: black;
    border-width: 12px;
    float: left;
}

Điều này mang lại đầu ra sau

Như bạn có thể thấy, div đầu tiên đang nổi bên trái. Div thứ hai bây giờ di chuyển lên để chiếm không gian còn lại từ div đầu tiên. Bây giờ bạn có thể thấy cách thuộc tính float ảnh hưởng đến những phần tử đơn giản này, bạn có thể xem cách hoạt động của thuộc tính clearfix và clearfix

Sử dụng thuộc tính Clear và Clearfix

Tài sản rõ ràng

Một tùy chọn định vị khác là thuộc tính rõ ràng. Thuộc tính này ảnh hưởng đến khái niệm float bằng cách di chuyển các phần tử qua nó thay vì để chúng di chuyển lên trên để chiếm không gian có sẵn

Trong mã CSS ví dụ này, thuộc tính clear chỉ được đặt trên phần tử div 1.

#div1{
    border-style: solid;
    border-color: black;
    border-width: 12px;
    clear: left;
}

Điều này mang lại đầu ra sau trên trang HTML

Giống như ví dụ ban đầu, div thứ hai nằm dưới div thứ nhất. Sự khác biệt là nó được yêu cầu di chuyển qua div đầu tiên đó. Hãy xem lại nó với nhiều nội dung được thêm vào

Trong ví dụ bên dưới, văn bản mẫu đã được thêm các thành phần đoạn văn vào giữa các div

I am div number 1
I am a string of sample text for this image.
I am a string of sample text for this image.
I am a string of sample text for this image.
I am a string of sample text for this image.
I am a string of sample text for this image.
I am div number 2

Với phần tử div 1 được đặt thành giá trị float ở bên trái, đầu ra sau đây được nhìn thấy

Bây giờ, với thuộc tính float bị loại bỏ và thuộc tính rõ ràng được thêm vào với giá trị left, đầu ra sẽ thay đổi thành

Trong hình trên, bạn có thể thấy rằng các phần tử khác đã được CSS hướng dẫn tránh xa phần tử div one và di chuyển qua phần tử đó đến các vị trí bên dưới. Bây giờ bạn có thể thấy thuộc tính rõ ràng hoạt động như thế nào, đã đến lúc chuyển sang phần rõ ràng

Giải pháp Clearfix (Hack)

Việc sử dụng được thiết kế cho bản hack rõ ràng liên quan đến cách một phần tử có kích thước trong một phần tử khác. Có nhiều lý do và tình huống mà đây có thể là một vấn đề. Trong mỗi cái, để nó một mình sẽ không phải là một lựa chọn

Cân nhắc xem bạn có đang làm việc với một danh sách các thuật ngữ đã xác định kèm theo hình ảnh làm ví dụ đặt bên cạnh chúng không. Nếu những hình ảnh đó và văn bản tương ứng của chúng không được căn chỉnh đúng cách, bạn có thể gặp phải một số thiết kế trang khó hiểu. Vấn đề này sẽ tự kết hợp với bất kỳ kiểu CSS phức tạp nào mà bạn có thể muốn thêm khi trang phát triển

Một cách mà các nhà thiết kế có thể giải quyết vấn đề này là sử dụng phương pháp "xóa". Về cơ bản, đây là một cách sử dụng các thuộc tính CSS để tạo ra vấn đề về kích thước. Trong mã HTML mẫu bên dưới, một hình ảnh được thêm vào trong phần tử div đầu tiên

  
Udacity: CSS Clearfix Property
      

       
This is a sentence about rocks.
       
Look at that, an image of rocks right over there!
       

      
      
I am still div number 2
     

Trong CSS, hình ảnh được thả nổi bên phải để hiển thị như dự định

img{
    float: right;
    }

Mặc dù hình ảnh đang được thả nổi bên phải nhưng nó vẫn có vấn đề về vị trí. Khi không áp dụng kiểu dáng, hình ảnh nhạc rock sẽ nằm bên ngoài phần tử div đầu tiên và tràn ra phần tử div thứ hai

Để giảm thiểu hiệu ứng này, bạn có thể sử dụng phương pháp Clearfix. Bản hack Clearfix không phải là một giá trị thuộc tính mà là một tập hợp các thuộc tính hoạt động cùng nhau để tạo ra kết quả mong muốn. Mã CSS mẫu bên dưới hiển thị một bộ tùy chọn khác được thêm vào phần tử div 1

#div1::after{
     content: "";
     clear: both;
     display: table;
    }

Trong ví dụ về mã CSS, giải pháp Clearfix không chỉ đơn giản là một thuộc tính mà bạn có thể sử dụng. Lưu ý rằng bộ chọn “after” tạo một phần tử giả chạm vào phần tử con cuối cùng của phần tử đích. Bộ chọn “sau” là chìa khóa cho các hiệu ứng diễn ra

Thuộc tính "nội dung" được sử dụng để thêm nội dung. Trong trường hợp này, nó sẽ được đặt sau phần tử con khi bộ chọn “after” được áp dụng

Thuộc tính "xóa" ở đây được đặt thành "cả hai" cho biết rằng nó phải rõ ràng ở cả điểm nổi bên trái và bên phải, di chuyển qua chúng

Thuộc tính “hiển thị” được đặt thành “bảng” để sử dụng định dạng cấu trúc của bảng HTML

Kết quả cuối cùng của việc sử dụng phương pháp này tạo ra đầu ra sau

Clearfix Đi về phía trước?

Điều quan trọng cần nhớ là giải pháp Clearfix được tạo ra dưới dạng một loại hack để xử lý sự cố bằng cách sử dụng số float trong thiết kế web. Điều đó không có nghĩa là vấn đề không tồn tại ngày nay hoặc nó không có giá trị sử dụng riêng.  

Tuy nhiên, điều cần thiết là tận dụng những tiến bộ đạt được trong thiết kế bố trí hiện đại. Các tùy chọn như Flexbox và CSS Grid đã cho phép các trang HTML trở nên năng động và ít phụ thuộc vào các thiết kế nặng nề nổi.  

Thêm vào suy nghĩ tiến bộ đó là việc sử dụng giá trị thuộc tính hiển thị CSS của “flow-root. ” Điều này cho phép một khối mới được hình thành cho phần tử dự định với ít công việc hơn. Tất nhiên, thậm chí có thể có các tùy chọn mới được xây dựng dựa trên điều này cho các nhà thiết kế web trong năm tới. Thật tuyệt khi có những bản hack cũ để dựa vào, nhưng cũng thật tuyệt khi trở thành một phần của cộng đồng không ngừng phát triển và tiến bộ

__________________________________________________________________________

Tại sao chỉ dừng lại ở CSS? . Nếu bạn muốn thăng tiến trong sự nghiệp,  hãy thực hiện những bước đầu tiên bằng cách học cách viết mã. Có những kỹ năng này có thể giúp bạn mở ra cánh cửa cho những khả năng nghề nghiệp mới đó. Đăng ký khóa học Giới thiệu về Lập trình Nanodegree của Udacity ngay hôm nay để bắt đầu cuộc hành trình

Clearfix trong CSS là gì?

Làm cách nào để xóa float trong CSS?

Clearfix có còn cần thiết không?

Tại sao chúng tôi sử dụng rõ ràng cả hai trong CSS?