clear 是用于清除浮动的CSS属性，它指定元素的哪一侧不允许有浮动元素存在。使用 clear 可以防止浮动元素对其上方的元素产生影响，解决浮动引起的高度塌陷问题。
使用方式：
在需要清除浮动的元素后面插入一个带有 clear 属性的元素，这个元素可以是空元素、伪元素，或者其他具有 clear 属性的块级元素。
.clearfix::after {
content: "";
display: table;
clear: both;
}上述代码中的 .clearfix::after 是一个伪元素，通过设置 content: ""; 和 display: table;，并应用 clear: both;，实现了清除浮动的效果。
详细介绍：
-
clear属性： 用于规定元素的哪一侧不允许有浮动元素。常用的值包括：left：不允许左侧有浮动元素。right：不允许右侧有浮动元素。both：不允许左右两侧有浮动元素。none（默认值）：允许左右两侧有浮动元素。
-
::after伪元素： 用于在元素的最后插入一个虚拟的子元素。通过设置content: "";可以让这个伪元素产生可见的效果。 -
display: table;： 用于使伪元素表现得像一个块级元素，以便clear属性生效。这是一种常见的清除浮动的技巧。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clearfix Example</title>
<style>
.float-left {
float: left;
width: 100px;
height: 100px;
background-color: lightblue;
margin: 10px;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="float-left"></div>
<div class="float-left"></div>
<div class="clearfix"></div>
<p>Text after floated elements.</p>
</body>
</html>在上述示例中，.clearfix::after 伪元素被插入在浮动元素后面，通过 clear: both; 清除了浮动。这样可以防止浮动元素影响后续元素的布局，确保文档流正常。在现代CSS布局中，Flexbox 和 Grid 布局等方式也提供了更灵活的布局选项，减少了对 clear 的需求。