CĂN BẢN
CSS3
CSS RESPONSIVE
CSS PARALLAX
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

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ẽ 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.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

ky thuat clearfix trong css png

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;
                width: 200px;
                height: 200px;
                float: left;
            }
            .right{
                border: solid 1px blue;
                width: 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:

ky thuat clearfix trong css 1 png

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.

ky thuat clearfix trong css 2 png

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;
    width: 200px;
    height: 100px;
    float: left;
    background: tomato;
}
.right{
    border: solid 1px blue;
    width: 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:

ky thuat clearfix trong css 3 png

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 đỏ.

ky thuat clearfix trong css 5 png

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. 

ky thuat clearfix trong css 6 png

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;
    width: 0px;
    height: 0px;
}

XEM DEMO

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

ky thuat clearfix trong css 2 png

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;
    width: 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.

Cùng chuyên mục:

Validate form bằng HTML5

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Thẻ script trong HTML

Cách sử dụng thẻ script html ...

Thẻ noscript trong HTML

Thẻ noscript trong HTML

Cách sử dụng thẻ noscript html ...

Top