所属分类：web前端开发
The clearfix, as the name suggests, is used to clear floats. It is generally used in float layouts. The clearfix is considered a hack to clear floats.
Let us see the problem first before moving towards the solution. We have an image here, floated to the right. It overflows outside its container since it is way taller than the element belonging to it −
微博登录
QQ登录<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid blue;
padding: 5px;
}
.myimg {
float: right;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>We haven't used clearfix below:</p>
<div>
<img class="myimg" src="https://img.zzsucai.com/202309/07/74b8B237496075712.jpg" alt="Machine Learning" width="150" height="150">
Etiam accumsan metus sapien, rutrum sagittis nunc posuere eu. Ut facilisis tortor eget justo
scelerisque, quis porta nisl sagittis.
</div>
</body>
</html>
The output displays the overflow issue −
Let us now fix the issue with clearfix −
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid blue;
padding: 5px;
}
.myimg {
float: right;
}
.clearfix {
overflow: auto;
}
</style>
</head>
<body>
<h2 style="clear:right">Demo Heading</h2>
<p>We have used clearfix below:</p>
<div class="clearfix">
<img class="myimg" src="https://img.zzsucai.com/202309/07/74b8B237496075712.jpg" alt="Machine Learning" width="150" height="150">
Etiam accumsan metus sapien, rutrum sagittis nunc posuere eu. Ut facilisis tortor eget justo
scelerisque, quis porta nisl sagittis.
</div>
</body>
</html>
The ::after选择器在这里用于修复clearfix −
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid blue;
padding: 5px;
}
.myimg {
float: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2 style="clear:right">Demo Heading</h2>
<p>We have used clearfix below:</p>
<div class="clearfix">
<img class="myimg" src="https://img.zzsucai.com/202309/07/74b8B237496075712.jpg" alt="Machine Learning" width="150" height="150">
Etiam accumsan metus sapien, rutrum sagittis nunc posuere eu. Ut facilisis tortor eget justo
scelerisque, quis porta nisl sagittis.
</div>
</body>
</html>
