clear是CSS属性之一，用于控制元素在浮动元素周围的行为。当元素周围存在浮动元素时，clear属性指定元素是否应该将其边缘清除浮动元素。
clear属性通常用于解决父元素包含浮动元素而导致的高度塌陷问题。如果一个元素的clear属性设置为left，那么它将从浮动元素的左侧清除，如果设置为right，那么它将从浮动元素的右侧清除，如果设置为both，那么它将从浮动元素的两侧清除。
以下是一个clear属性的示例：
HTML代码：
<div class="container">
<div class="float-left"></div>
<div class="float-right"></div>
<div class="clear"></div>
</div>
CSS代码：
.float-left {
float: left;
width: 50%;
height: 100px;
background-color: blue;
}.float-right {
float: right;
width: 50%;
height: 100px;
background-color: green;
}
.clear {
clear: both;
}
在这个例子中，我们创建了两个浮动元素，分别设置其float属性为left和right，并将它们分别设置为占用其父元素50%的宽度。我们还创建了一个空的div元素，并将其clear属性设置为both，以清除浮动元素。
如果我们将上述代码添加到一个HTML页面中，将会显示两个分别占用其父元素左右50%宽度的浮动元素，并且在它们周围添加了一个空的div元素，并将其clear属性设置为both，以确保父元素的高度不会塌陷。
以下是一个使用clear属性的示范实例：
HTML代码：
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
</div>
CSS代码：
.container {
margin: 0 auto;
width: 600px;
}.left {
float: left;
width: 50%;
height: 200px;
background-color: blue;
}
.right {
float: right;
width: 50%;
height: 100px;
background-color: green;
}
.clear {
clear: both;
}
在这个例子中，我们创建了两个浮动元素，一个占用其父元素左侧50%的宽度，另一个占用右侧50%的宽度。我们还创建了一个空的div元素，并将其clear属性设置为both，以清除浮动元素。
在.container类的样式中，我们将其margin属性设置为0 auto，以使该元素居中对齐。我们还将其width属性设置为600px，以确保其宽度不会超过600px。在浮动元素的样式中，我们分别设置其float属性和width属性，以占用其父元素左侧和右侧的50%宽度，并设置其高度和背景颜色。
最后，我们创建了一个段落元素，以在浮动元素之后添加文本内容。
在这个例子中，我们使用clear属性清除浮动元素，以确保父元素的高度不会塌陷，并且可以正确显示其子元素。