CSS clearfix

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">
  欢迎来到bianchenghao6.com。在这里,您可以找到易于阅读并帮助您提升能力的最佳教程。
</div>
<p>使用overflow:auto; CSS属性</p>
<h1>使用Clearfix</h1>
<div class="jtp">
  <img class="img2" src="jtp.png">
  欢迎来到bianchenghao6.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">
  欢迎来到bianchenghao6.com。在这里,您可以找到易于阅读并帮助您清除概念的最佳教程。
</div>
<p>Another clearfix method</p>
<h1>With Clearfix</h1>
<div class="jtp">
  <img src="jtp.png">
  欢迎来到bianchenghao6.com。在这里,您可以找到易于阅读并帮助您清除概念的最佳教程。
</div>
</body>
</html>