在CSS中，`clear: both;`属性是一个用于控制元素浮动行为的重要属性。它主要作用于非浮动的元素，决定了该元素的哪一侧不允许有浮动元素的存在。在布局网页时，浮动（`float`）是一个常用的技术，但如果不恰当地使用，它也可能导致布局出现问题。这时，`clear: both;`属性就能发挥它的作用。
当一个元素被设置了`float: left;`或`float: right;`属性后，它会脱离常规的文档流，并向左或向右浮动，其周围的元素会围绕它布局。但是，这种布局方式可能导致浮动元素后面的非浮动元素布局混乱，它们可能会紧贴在浮动元素的旁边，甚至部分或完全进入浮动元素的区域内。
`clear: both;`属性正是为了解决这个问题而出现的。它告诉浏览器，元素的两侧都不允许有浮动元素，即这个元素将完全位于所有浮动元素的下方。以下是`clear: both;`的具体作用：
1. 避免文字环绕：当在一个浮动元素后应用`clear: both;`时，它后面的非浮动元素（如段落、列表等）将不会紧随其后，而是会在浮动元素的下方开始布局，从而避免了文字环绕浮动元素的情况。
2. 清除浮动影响：在多个连续浮动元素之后，父元素可能不会自动伸展以包围所有浮动子元素，导致布局失败。通过在浮动元素之后添加一个带有`clear: both;`的空元素，可以强制父元素包含所有浮动子元素，修复布局。
3. 页脚定位：在页面布局中，如果页脚（footer）需要在所有内容下方，给页脚添加`clear: both;`可以确保它不会被前面的浮动内容所影响，始终保持在页面底部。
下面是一个简单的示例：
Box 1
Box 2
相应的CSS：
.box {
width: 100px;
height: 100px;
margin: 10px;
background-color: #f00;
}
.clear-fix {
clear: both;
}
.footer {
background-color: #000;
color: #fff;
text-align: center;
}
在这个示例中，`.clear-fix`类应用了`clear: both;`属性，确保页脚位于所有浮动元素下方。
在现代前端开发中，除了使用`clear: both;`，还有其他清除浮动的技术，如使用伪元素`:after`或利用Flexbox和Grid布局来避免浮动带来的问题。但`clear: both;`仍然是一个重要的CSS属性，用于解决特定的布局问题。