在CSS中，我們經常會遇到clear both這個屬性，那么這個屬性是干什么用的呢？

.clear {
clear: both;
}

clear both的作用是清除浮動元素的影響。在一個容器中，如果某個元素設置了浮動（float），那么該元素會脫離文檔流，導致容器的高度不能正確計算。而使用clear both可以讓浮動元素下方的元素不受浮動元素的影響，從而正確計算容器高度。

例如，我們有一個包含浮動元素的容器：

.container {
width: 500px;
background-color: #ccc;
}
.box {
float: left;
width: 100px;
height: 100px;
background-color: #f00;
}

如果我們不加clear both，容器的高度不會計算浮動元素的高度，導致容器高度不夠，從而影響頁面布局。

而如果加上clear both：

.container:after {
content: "";
clear: both;
display: block;
visibility: hidden;
height: 0;
}

可以看到，容器高度被正確計算了。

使用clear both的時候，一般是在浮動元素下方的元素上加上這個屬性。也可以在容器的偽元素上添加content: "";和display: block;，然后使用clear: both;清除容器內部的浮動元素。不過需要注意的是，如果出現了嵌套浮動元素的情況，可能需要額外設置clear屬性，避免造成影響。