Clearfix 是一种确保容器正确包围并包含浮动元素的技术。它通过向容器添加一个空元素来防止布局问题，这会清除左右浮动，从而允许容器展开并保持其预期布局。
Clearfix 有助于防止容器塌陷、不均匀等问题高度、内容重叠、对齐不一致。
本章将探讨，clearfix 技术如何确保容器元素正确包含其浮动子元素。
如上所述，CSS clearfix 修复所需元素中的溢出元素。为此，可以使用以下三个属性:
下图演示了clearfix布局供参考:
CSS Clearfix: overflow和float属性
让我们看一个示例，其中图像大于其容器的高度，导致图像超出其容器的边界并可能破坏布局。
<html>
<head>
<style>
div {
border: 2px solid #f0610e;
padding: 5px;
background-color: #86f00e;
}
.tutimg {
float: right;
border: 3px solid #f0610e;
}
</style>
</head>
<body>
<h2>Without clearfix</h2>
<div>
<img class="tutimg" src="images/tutimg.png" width="200" height="200">
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
</div>
</body>
</html> CSS Clearfix: 溢出属性
为了解决这个溢出问题，我们可以设置overflow: auto;属性到相应的元素，确保图像完全包含在容器内。
<html>
<head>
<style>
div {
border: 2px solid #f0610e;
padding: 5px;
background-color: #86f00e;
}
.tutimg {
float: right;
border: 3px solid #f0610e;
}
.custom-clearfix {
overflow: auto;
}
</style>
</head>
<body>
<h2>With clearfix</h2>
<div class="custom-clearfix">
<img class="tutimg" src="images/tutimg.png" width="200" height="200">
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
</div>
</body>
</html> CSS Clearfix: 带高度属性
您还可以通过设置 <div> 元素的高度来实现clearfix类似于浮动图像的高度。
<html>
<head>
<style>
div {
border: 2px solid #f0610e;
padding: 10px;
height: 120px;
background-color: #86f00e;
}
.tutimg {
float: right;
border: 3px solid #f0610e;
}
</style>
</head>
<body>
<div>
<img class="tutimg" src="images/tutimg.png" width="120" height="120">
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
</div>
</body>
</html> CCS Clear 属性
CSS clear 属性通过将元素移过它而不是让它们向上移动以占据空间来影响浮动概念可用的。 clear 属性适用于浮动和非浮动元素。
可能的值为:
none:是一个关键字，指示该元素不会向下移动以清除过去的浮动元素。
left:是一个关键字，表示元素向下移动以清除过去的左侧浮动元素。
right:是一个关键字，表示元素向下移动以清除过去的右浮动。
both:是一个关键字，表示元素向下移动清除左右浮动。
inline-start:是一个关键字，指示元素向下移动以清除其包含块开始侧的浮动，即左边浮动在ltr脚本上，右边浮动在rtl脚本上。
inline-end:是一个关键字，指示元素向下移动以清除其末端的浮动包含块，即右侧浮动在ltr脚本上，左侧浮动在rtl脚本上。
CSS clear: left
以下示例演示了clearfix使用clear:left属性:
<html>
<head>
<style>
.mainbody{
border: 1px solid black;
padding: 10px;
}
.left {
border: 1px solid black;
clear: left;
}
.aqua{
float: left;
margin: 0;
background-color: aqua;
color: #000;
width: 20%;
}
.pink{
float: left;
margin: 0;
background-color: pink;
width: 20%;
}
p {
width: 50%;
}
</style>
</head>
<body>
<div class="mainbody">
<p class="aqua">
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
</p>
<p class="pink">无论何事，只要对它有无限的热情你就能取得成功。</p>
<p class="left">本自然段 clears left.</p>
</div>
</body>
</html> CSS clear: right
以下示例演示使用clear:right属性的clearfix:
<html>
<head>
<style>
.mainbody{
border: 1px solid black;
padding: 10px;
}
.right {
border: 1px solid black;
clear: right;
}
.aqua{
float: right;
margin: 0;
background-color: black;
color: #fff;
width: 20%;
}
.pink{
float: right;
margin: 0;
background-color: pink;
width: 20%;
}
p {
width: 50%;
}
</style>
</head>
<body>
<div class="mainbody">
<p class="aqua">
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
</p>
<p class="pink">无论何事，只要对它有无限的热情你就能取得成功。</p>
<p class="right">失败是成功之母。</p>
</div>
</body>
</html> CSS clear: both
以下示例演示使用clear:both 属性的clearfix:
<html>
<head>
<style>
.mainbody{
border: 1px solid black;
padding: 10px;
}
.both {
border: 1px solid black;
clear: both;
}
.aqua{
float: left;
margin: 0;
background-color: black;
color: #fff;
width: 20%;
}
.pink {
float: right;
margin: 0;
background-color: pink;
width: 20%;
}
p {
width: 45%;
}
</style>
</head>
<body>
<div class="mainbody">
<p class="aqua">
CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。
</p>
<p class="pink">无论何事，只要对它有无限的热情你就能取得成功。</p>
<p class="both">本自然段 clears both.</p>
</div>
</body>
</html>