clear 属性用于控制元素如何与浮动元素进行交互，并在布局中清除浮动效果。当一个元素拥有 clear 属性时，它将被推到浮动元素的下方，以避免与浮动元素发生重叠。
下面是 clear 属性的应用示例：
<style>
.float-left {
float: left;
width: 200px;
height: 100px;
background-color: red;
}.content {
clear: both;
background-color: blue;
}
</style><div class="float-left"></div>
<div class="float-left"></div>
<div class="content">
这是清除浮动效果后的内容区域。
</div>
在上述示例中，我们创建了两个具有相同样式的浮动元素，并设置它们为左浮动。然后，我们创建了一个带有 .content 类的 <div> 元素，它具有 clear: both; 的属性设置。这意味着 .content 元素将会被推到浮动元素的下方，以避免与浮动元素重叠。
通过使用 clear 属性，我们可以确保 .content 元素在布局中正常显示，不受浮动元素的影响。
clear 属性有几个可选的取值：
clear: both;：元素将被推到浮动元素的下方，并同时清除左右两侧的浮动效果。
clear: left;：元素将被推到左侧的浮动元素的下方，并清除左侧的浮动效果。
clear: right;：元素将被推到右侧的浮动元素的下方，并清除右侧的浮动效果。
clear: none;（默认值）：元素不会清除任何浮动效果。
请根据具体的布局需求选择适当的 clear 属性值，以确保元素在浮动元素周围的正确显示。