利用css中的 clear 属性可以重置指定方向的浮动，使其元素不再与之前的浮动元素并排，而是强制换行显示。具体做法是在需要清除浮动的元素上设置 clear: left、clear: right 或 clear: both，分别对应清除左侧、右侧或两侧的浮动影响。
clear: left 如何清除左侧浮动
当设置 clear: left 时，该元素的顶部边框会位于之前所有左浮动元素的底部下方。这意味着即使前面的元素向左浮动，当前元素也会自动向下移动，直到其顶部高于所有左侧浮动元素的底部。这种机制常用于在多个左浮动块后插入一个不浮动的内容块。
<div class="container">
<div class="float-left">左浮动元素</div>
<div class="clear-left">清除左侧浮动</div>
</div>
<style>
.float-left {
float: left;
width: 100px;
height: 100px;
background-color: lightblue;
}
.clear-left {
clear: left;
background-color: lightgreen;
padding: 10px;
}
</style>运行上述代码，可以看到“清除左侧浮动”元素会自动移动到“左浮动元素”的下方，而不是与其并排。
立即学习“前端免费学习笔记（深入）”；
clear: right 如何清除右侧浮动
设置 clear: right 会使元素的顶部边框位于之前所有右浮动元素的底部下方。这与 clear: left 类似，但针对的是向右浮动的元素。如果前面有右浮动元素，当前元素会向下移动以避开它们。
<div class="container">
<div class="float-right">右浮动元素</div>
<div class="clear-right">清除右侧浮动</div>
</div>
<style>
.float-right {
float: right;
width: 100px;
height: 100px;
background-color: lightcoral;
}
.clear-right {
clear: right;
background-color: lightyellow;
padding: 10px;
}
</style>运行上述代码，“清除右侧浮动”元素会出现在“右浮动元素”的下方，确保布局整齐。
使用 clear: both 同时清除左右浮动
当需要同时清除左侧和右侧的浮动时，可以使用 clear: both。这会使元素的顶部边框位于之前所有浮动元素（无论是左浮动还是右浮动）的底部下方。这种用法在复杂布局中非常常见，特别是在处理多列浮动布局时。
<div class="container">
<div class="float-left">左浮动元素</div>
<div class="float-right">右浮动元素</div>
<div class="clear-both">清除两侧浮动</div>
</div>
<style>
.float-left {
float: left;
width: 100px;
height: 100px;
background-color: lightblue;
}
.float-right {
float: right;
width: 100px;
height: 100px;
background-color: lightcoral;
}
.clear-both {
clear: both;
background-color: lightgreen;
padding: 10px;
}
</style>运行上述代码，“清除两侧浮动”元素会出现在所有浮动元素的下方，确保布局不受任何浮动影响。
