CSS clearfix
clear float（或clearfix）是元素修复或清除子元素的一种方法，因此我们不需要添加其他标记。它解决了当多个浮动元素彼此并排堆叠时发生的错误。
假设如果将侧边栏的位置设置在主要内容块的左侧，但是我们使元素折叠彼此重叠。我们可以将其理解为子元素比其父元素高且高。
要解决此问题，我们可以对包含的元素使用
overflow：auto; 属性。
示例
在此示例中，图像是浮动的并且比包含它的元素高，因此它会在外部溢出
现在，我们正在创建一个
jtp 类，并将
overflow：auto; 属性添加到相应的元素。
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid red;
padding: 5px;
background-color:pink;
font-size:20px;
}
img{
float: right;
border: 3px solid blue;
}
p{
font-size:20px;
clear:right;
}
.jtp{
overflow: auto;
}
</style>
</head>
<body>
<h1>Without Clearfix</h1>
<div>
<img class="img1" src="jtp.png">
欢迎来到lidihuo.com。在这里，您可以找到易于阅读并帮助您提升能力的最佳教程。
</div>
<p>使用overflow：auto; CSS属性</p>
<h1>使用Clearfix</h1>
<div class="jtp">
<img class="img2" src="jtp.png">
欢迎来到lidihuo.com。在这里，您可以找到易于阅读并帮助您提升能力的最佳教程。
</div>
</body>
</html>
只要我们管理填充和边距，上述clearfix方法就可以很好地工作。但是，现代的clearfix方法更安全。
让我们看看另一种clearfix方法。
示例
在此示例中，我们将
clear 属性设置为
'both'和，这表示浮动元素在左右两侧都不允许。我们将
display 属性设置为
'table'，这使该元素的行为类似于HTML的
<table> 元素。并且我们还必须将
内容留空。
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid red;
padding: 5px;
background-color:pink;
font-size:20px;
}
img{
float: right;
border: 3px solid blue;
}
p{
font-size:20px;
clear:right;
}
.jtp:after{
content:'.';
clear:both;
display: table;
}
</style>
</head>
<body>
<h1>Without Clearfix</h1>
<div>
<img src="jtp.png">
欢迎来到lidihuo.com。在这里，您可以找到易于阅读并帮助您清除概念的最佳教程。
</div>
<p>Another clearfix method</p>
<h1>With Clearfix</h1>
<div class="jtp">
<img src="jtp.png">
欢迎来到lidihuo.com。在这里，您可以找到易于阅读并帮助您清除概念的最佳教程。
</div>
</body>
</html>
