Bài 15: Kỹ thuật ClearFix trong CSS

Trong bài tìm hiểu thuộc tính float thì mình có sử dụng sơ qua về kỹ thuật ClearFix này rồi nhưng không chi tiết lắm, vì vậy trong bài này mình sẽ ...

Trong bài tìm hiểu thuộc tính float thì mình có sử dụng sơ qua về kỹ thuật ClearFix này rồi nhưng không chi tiết lắm, vì vậy trong bài này mình sẽ trình bày một cách chi tiết và cụ thể hơn. Trong bài mình có sử dụng after và before trong CSS nữa nên nếu bạn chưa biết thì quay lại bài đó đọc nhé.

1. Kỹ thuật ClearFix là gì?

Kỹ thuật ClearFix trong CSS là cách sử dụng các thuộc tính CSS để điều chỉnh vùng không gian của thẻ cha so với các thẻ con có sử dụng float. Tại vì khi bạn sử dụng float thì chiều cao của thẻ cha sẽ được tính là 0px so với thẻ con float đó, điều này nghĩa chiều cao của thẻ cha sẽ được tăng lên khi nội dung bên trong của nó không có sử dụng float.

Kỹ thuật này được dùng khá nhiều trong việc xây dựng bổ cục layout vì chúng ta có sử dụng thuộc tính float để đẩy nội dung qua trái hoặc phải.

Ví dụ: XEM DEMO

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>

            .group1{
                border: solid 1px red;
            }

            .left{
                border: solid 1px blue;
                awidth: 200px;
                height: 200px;
                float: left;
            }
            .right{
                border: solid 1px blue;
                awidth: 200px;
                height: 200px;
                float: right;
            }

        </style>
    </head>
    <body>
        <div class="group1">
            <div class="left">
                float:left, không ảnh hưởng tới chiều cao thẻ cha
            </div>
            <div class="right">
                float:right, không ảnh hưởng tới chiều cao thẻ cha
            </div>
            <div>
                Nội dung không có float. CHiều cao của thẻ cha phụ thuộc mỗi thẻ div này thôi.
            </div>
        </div>
    </body>
</html>

Chạy lên giao diện sẽ như sau:

Như trong hình bạn thấy nếu ta thêm nội dung vào bên dưới thẻ cha thì lúc này đương giao tiếp sẽ nằm ẩn phía dưới hai ô trái phải nên dẫn đến tình trạng nội dung thêm vào bị đè. Và kỹ thuật sử dụng CSS để điều chỉnh chiều cao của thẻ cha tương đương với chiều cao của mọi thẻ con để nội dung bên dưới không bị đè thì ta gọi là kỹ thuật ClearFix trong CSS.

2. Kỹ thuật ClearFix trong CSS

Để hiểu rõ hơn về kỹ thuật này thì ta làm một ví dụ như sau: Hãy xây dựng layout HTML như hình dưới đây.

Trong hình trên thì vùng có border màu đỏ chính là phần mà ta cần ClearFix, và với layout này thì ta sẽ xây dựng HTML như sau:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div class="group1">
            <div class="left">
                Nội dung bên trái
            </div>
            <div class="right">
                Nội dung bên phải
            </div>
        </div>
        <div class="group2">
            Nội dung bên dưới
        </div>
    </body>
</html>

Trong đó div.group1 là phần phía trên chứa hai ô trái phải, div.group2 là phần màu vàng phía dưới.

Trước tiên chúng ta viết CSS cho chúng:

.group1{
    border: solid 1px red;
    padding: 1px;
}

.left{
    border: solid 1px blue;
    awidth: 200px;
    height: 100px;
    float: left;
    background: tomato;
}
.right{
    border: solid 1px blue;
    awidth: 200px;
    height: 100px;
    float: right;
    background: pink;
}

.group2{
    height: 100px;
    background: yellow;
}

XEM DEMO

Chạy lên bạn sẽ thấy như hình sau:

Rõ ràng phần màu vàng đã bị hai ô trái phải đè lên, lý do là hai ô đó sử dụng thuộc tính float nên phần border màu đỏ không ảnh hưởng chiều cao, vì vậy vùng giao tiếp giữa phần màu vàng và phần có border màu đỏ sẽ nằm bên dưới hai ô trái phải.

Nếu để ý kỹ hơn chút nữa thì bạn thấy phần tiếp giao giữa hai phần chính là vùng after của phần border màu đỏ, vì vậy ta sẽ bổ sung một đoạn CSS clear:both vào vị trí after để xóa vùng cho cả hai bên như sau:

.group1:after{
    display: block;
    content: ".";
}

XEM DEMO

Chạy lên bạn sẽ thấy vùng 1 xuất hiện một dấu chấm nằm ở bên trong vùng border màu đỏ.

Câu hỏi đặt ra tại sao ta đặt clear:both để xóa vùng hai bên rồi mà vùng màu vàng vẫn bị đè? Lý do chính là theo mặc định thì after sẽ hiển thị dạng display:inline-block nên ta phải đổi nó sang display:block.

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

XEM DEMO

Chạy lên thì vùng vàng đã được đẩy xuống dưới. 

Tuy nhiên lại xảy ra vấn đề là dư đi một vùng dấu chấm (vùng after) nên để xóa vùng này thì ta sẽ thiết lập chiều rộng và chiều cao cho after = 0.

.group1:after{
    clear: both;
    content: ".";
    display: block;
    awidth: 0px;
    height: 0px;
}

XEM DEMO

Chạy lên và giao diện đã giống hoàn toàn như ta mong đợi.

Kết luận: Như vậy kỹ thuật ClearFix trong CSS rất ngắn gọn gồm 5 đoạn code CSS gom lại trong một class và ta có thể đặt một cái tên bất kì và sau này muốn sử dụng thì chỉ việc bổ sung class đó vào. Ví dụ tôi đặt tên class là clearfix.
.clearfix:after{
    clear: both;
    content: ".";
    display: block;
    awidth: 0px;
    height: 0px;
}

Cách sử dụng:

<div class="group1 clearfix">
    ...
</div>

3. Lời kết

Vậy là bạn đã hiểu được kỹ thuật ClearFix trong CSS rồi đúng không nào, đây là một kỹ thuật khá hay và quan trọng mà bạn cần nắm bắt để sau này đi làm có lúc người ta phỏng vấn sẽ đề cập đến. Chúc ban học tốt.

BÀI KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

Bài liên quan

[BÀI 14]Kỹ thuật Clearfix trong CSS

Kỹ thuật Clearfix trong CSS Clearfix trong CSS không phải là một thuộc tính, mà nó là một kỹ thuật để loại bỏ ảnh hưởng của float lên các vùng. Clearfix là gì? Khi một thẻ cha có thẻ con sử dụng float thì chiều cao của thẻ cha so với thẻ con đó là 0px. Chiều cao của thẻ cha chỉ phụ ...

Trần Trung Dũng viết 17:07 ngày 04/10/2018

Ứng dụng kỹ thuật fuzzing trong việc tìm lỗ hổng bảo mật Website

I. Lỗ hổng hệ thống websize là gì? Lỗ hổng website là những điểm yếu của hệ thống website mà hacker có thể lợi dụng để khai thác nhằm thu thập thông tin về hệ thống, tấn công lấy cắp thông tin, tấn công vào người dùng hệ thống hay tấn công chiếm quyền điều khiển hệ thống. Những lỗi bảo mật này có ...

Hoàng Hải Đăng viết 14:55 ngày 12/08/2018

Các kỹ thuật quản lý CSS của website

CSS là ngôn ngữ giúp cho website lột được vẻ ngoài xấu xí thô kệch để khoác lên mình chiếc áo xinh đẹp. CSS là sự kết hợp của các bộ lọc, các thuộc tính hay thậm chí là các hiệu ứng animation, transition. Code css không hề khó nhưng làm thế nào để viết code css được chuẩn hơn, tối ưu hơn, giảm tải ...

Hoàng Hải Đăng viết 14:53 ngày 12/08/2018

Code Chuẩn Seo, Giới Thiệu Một Số Kỹ Thuật Seo Trong Rails

Trong thực tế SEO là một việc rất quan trọng khi đưa một website lên internet, việc website có đông đảo người biết tới dẫn đến cơ hội thành công của website càng cao. Ngoài các hình thức Marketing trên Google AdWords, trên mạng xã hội Facebook, Twiter, Instagram để thu hút người dùng chúng ta cũng ...

Bùi Văn Nam viết 13:01 ngày 12/08/2018

Bài 14: After và Before trong CSS

Trong CSS có hai thuộc tính dùng để bổ sung thành phần vào đằng trước và đằng sau thẻ HTML đó là thuộc tính after và before, hai thuộc tính này ...

Hoàng Hải Đăng viết 09:53 ngày 03/08/2018
0