在CSS中，`clear`属性用于指定一个元素是否必须移动到在它之前的浮动元素下面。这是控制文档流中浮动元素布局的重要工具。`clear`属性可以接受的值包括`left`、`right`、`both`以及`none`。
当一个元素被设置为浮动（`float: left;`或`float: right;`）时，它将脱离常规的文档流，并且可能会覆盖在相邻元素之上。为了维持布局的顺序和防止浮动元素影响其他元素的显示位置，我们可以使用`clear`属性。
以下是`clear`属性各个值的含义：
- `clear: left;`：告诉浏览器，元素的左侧不允许出现浮动元素。换言之，应用了这个属性的元素将会被移动，以确保它的左侧没有浮动元素。
- `clear: right;`：与`clear: left;`类似，但这是针对元素的右侧。如果设置了`clear: right;`，浏览器会确保该元素的右侧没有浮动元素。
- `clear: both;`：这是最常用的值，意味着元素两侧都不允许有浮动元素。它将元素移动到所有浮动元素下面。
- `clear: none;`：这是默认值，意味着不应用任何清除浮动的规则。
以下是一个简单的例子，说明`clear`属性是如何工作的：
浮动元素1（向左浮动）
浮动元素2（向右浮动）
清除浮动
在上面的例子中，`.clear-fix`元素被设置为`clear: both;`，它将确保这个元素出现在两个浮动元素下方，即使有足够的水平空间来包含它们。
在布局时，`clear`属性经常用于以下场景：
1. 防止浮动元素对兄弟元素产生影响。
2. 在包含浮动的父元素内部创建一个“清除浮动的子元素”，以强制父元素包含其所有浮动的子元素（这通常用于解决“高度塌陷”问题）。
使用`clear`属性是管理页面布局中浮动元素视觉和位置关系的重要手段，有助于保持页面布局的预期设计和结构。