Kỹ thuật ClearFix trong CSS
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ẻ concó 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.
See the Pen ONXjJB by izcolor (@izcolor) on CodePen.
Như trong Demo 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.
Để 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;
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;
See the Pen ONXjNr by izcolor (@izcolor) on CodePen.
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: ".";
See the Pen ONXjNr by izcolor (@izcolor) on CodePen.
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;
See the Pen mPEMqQ by izcolor (@izcolor) on CodePen.
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;
See the Pen wGWqPL by izcolor (@izcolor) on CodePen.
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.
Kỹ thuật ClearFix trong CSS
Không có nhận xét nào: