04/10/2018, 17:07
[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ụ ...
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ụ thuộc vào thẻ nào không có float.
Float là thuộc tính dùng để đẩy nội dung qua bên trái hoặc phải.
Ví dụ 1 : Thẻ cha không có thẻ con không có float
<!DOCTYPE html>
<html lang="vi">
<head>
<title></title>
<meta charset="utf-8">
</head>
<style type="text/css">
.left{
float: left;
awidth: 300px;
height: 300px;
background-color: yellow;
}
.right{
float: right;
awidth: 300px;
height: 300px;
background-color: violet;
}
.father{
border: solid 1px red;
}
</style>
<body>
<div class="father">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html lang="vi"> <head> <title></title> <meta charset="utf-8"> </head> <style type="text/css"> .left{ float: left; awidth: 300px; height: 300px; background-color: yellow; } .right{ float: right; awidth: 300px; height: 300px; background-color: violet; } .father{ border: solid 1px red; } </style> <body> <div class="father"> <div class="left"></div> <div class="right"></div> </div> </body> </html> |
Kết quả :
Ví dụ 2 : Thẻ cha có thẻ con không có float
<!DOCTYPE html>
<html lang="vi">
<head>
<title></title>
<meta charset="utf-8">
</head>
<style type="text/css">
.left{
float: left;
awidth: 300px;
height: 300px;
background-color: yellow;
}
.right{
float: right;
awidth: 300px;
height: 300px;
background-color: violet;
}
.father{
border: solid 1px red;
}
</style>
<body>
<div class="father">
<div class="left"></div>
<div class="right"></div>
<div class="no_float">Text<br>Text<br>Text<br>Text<br>Text<br>Text<br></div>
</div>
</body>
</html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html lang="vi"> <head> <title></title> <meta charset="utf-8"> </head> <style type="text/css"> .left{ float: left; awidth: 300px; height: 300px; background-color: yellow; } .right{ float: right; awidth: 300px; height: 300px; background-color: violet; } .father{ border: solid 1px red; } </style> <body> <div class="father"> <div class="left"></div> <div class="right"></div> <div class="no_float">Text<br>Text<br>Text<br>Text<br>Text<br>Text<br></div> </div> </body> </html> |
Kết quả :
Chiều cao thẻ ‘father’ sẽ phụ thuộc vào thẻ ‘no_float’. Nhưng phần viền của thẻ cha bị nội dung của 2 thẻ ‘left’ và ‘right’ đè lên. Vậy kỹ thuật dùng CSS để điều chỉnh cho chiều cao của thẻ cha bằng chiều cao của mọi thẻ con gọi là kỹ thuật Clearfix trong CSS
- Thực hành Clearfix.
Yêu cầu xây dựng một layout bố cục như sau :
Bước 1 :
Xây dựng 1 file HTMl như sau :
<!DOCTYPE html>
<html lang="vi">
<head>
<title></title>
<meta charset="utf-8">
</head>
<style type="text/css">
.left{
float: left;
awidth: 200px;
height: 200px;
background-color: yellow;
}
.right{
float: right;
awidth: 200px;
height: 200px;
background-color: violet;
}
.father1{
border: solid 1px red;
}
.father2{
height: 200px;
background-color: blue;
}
</style>
<body>
<div class="father1">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="father2"></div>
</body>
</html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html lang="vi"> <head> <title></title> <meta charset="utf-8"> </head> <style type="text/css"> .left{ float: left; awidth: 200px; height: 200px; background-color: yellow; } .right{ float: right; awidth: 200px; height: 200px; background-color: violet; } .father1{ border: solid 1px red; } .father2{ height: 200px; background-color: blue; } </style> <body> <div class="father1"> <div class="left"></div> <div class="right"></div> </div> <div class="father2"></div> </body> </html> |
Kết quả :
Ta thấy phần màu xanh đã bị 2 phần ‘left’ và ‘right’ đè lên.
Phần giao tiếp của phần màu vàng và phần border của thẻ cha chính là phần after của thẻ ‘father1’.
Chạy đoạn code sau :
<!DOCTYPE html>
<html lang="vi">
<head>
<title></title>
<meta charset="utf-8">
</head>
<style type="text/css">
.left{
float: left;
awidth: 200px;
height: 200px;
background-color: yellow;
}
.right{
float: right;
awidth: 200px;
height: 200px;
background-color: violet;
}
.father1{
border: solid 1px red;
}
.father2{
height: 200px;
background-color: blue;
}
.father1:after{
content: 'phần after của father1';
}
</style>
<body>
<div class="father1">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="father2"></div>
</body>
</html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html lang="vi"> <head> <title></title> <meta charset="utf-8"> </head> <style type="text/css"> .left{ float: left; awidth: 200px; height: 200px; background-color: yellow; } .right{ float: right; awidth: 200px; height: 200px; background-color: violet; } .father1{ border: solid 1px red; } .father2{ height: 200px; background-color: blue; } .father1:after{ content: 'phần after của father1'; } </style> <body> <div class="father1"> <div class="left"></div> <div class="right"></div> </div> <div class="father2"></div> </body> </html> |
Kết quả :
Vậy để phần màu vàng không bị đè bởi 2 phần trái, phải nữa ta thêm thuộc tính clear : both và sử dụng display : block vào phần after của thẻ father1.
Code :
<!DOCTYPE html>
<html lang="vi">
<head>
<title></title>
<meta charset="utf-8">
</head>
<style type="text/css">
.left{
float: left;
awidth: 200px;
height: 200px;
background-color: yellow;
}
.right{
float: right;
awidth: 200px;
height: 200px;
background-color: violet;
}
.father1{
border: solid 1px red;
}
.father2{
height: 200px;
background-color: blue;
}
.father1:after{
clear: both;
content: 'phần after của father1';
display: block;
}
</style>
<body>
<div class="father1">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="father2"></div>
</body>
</html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!DOCTYPE html> <html lang="vi"> <head> <title></title> <meta charset="utf-8"> </head> <style type="text/css"> .left{ float: left; awidth: 200px; height: 200px; background-color: yellow; } .right{ float: right; awidth: 200px; height: 200px; background-color: violet; } .father1{ border: solid 1px red; } .father2{ height: 200px; background-color: blue; } .father1:after{ clear: both; content: 'phần after của father1'; display: block; } </style> <body> <div class="father1"> <div class="left"></div> <div class="right"></div> </div> <div class="father2"></div> </body> </html> |
Kết quả :
Để xóa đi phần dư của after ta cho chiều cao và chiều rộng của after = 0;
Code :
<!DOCTYPE html>
<html lang="vi">
<head>
<title></title>
<meta charset="utf-8">
</head>
<style type="text/css">
.left{
float: left;
awidth: 200px;
height: 200px;
background-color: yellow;
}
.right{
float: right;
awidth: 200px;
height: 200px;
background-color: violet;
}
.father1{
border: solid 1px red;
}
.father2{
height: 200px;
background-color: blue;
}
.father1:after{
clear: both;
content: 'phần after của father1';
display: block;
height: 0;
awidth: 0;
}
</style>
<body>
<div class="father1">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="father2"></div>
</body>
</html>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html> <html lang="vi"> <head> <title></title> <meta charset="utf-8"> </head> <style type="text/css"> .left{ float: left; awidth: 200px; height: 200px; background-color: yellow; } .right{ float: right; awidth: 200px; height: 200px; background-color: violet; } .father1{ border: solid 1px red; } .father2{ height: 200px; background-color: blue; } .father1:after{ clear: both; content: 'phần after của father1'; display: block; height: 0; awidth: 0; } </style> <body> <div class="father1"> <div class="left"></div> <div class="right"></div> </div> <div class="father2"></div> </body> </html> |
Kết quả :
Hoàn toàn đúng như yêu cầu.
Nếu chưa hiểu rõ, các bạn có thể tham khảo các khóa học tại đây.
Chúc các bạn thành công !!!
