clear属性用于解决浮动布局问题，其常用值为left、right、both和none；通过设置clear: both可使元素下移至浮动元素下方，避免布局错乱。实际开发中推荐使用伪元素清除法，如定义clearfix类配合::after实现更语义化、可维护的清除方案。
在CSS中，clear 属性用于控制元素在浮动元素旁边的位置，常用来清除浮动带来的布局问题。当一个元素设置了 float 后，后续的元素可能会围绕它排列，导致结构错乱。使用 clear 可以让元素“下移”到浮动元素下方，从而恢复正常文档流布局。
clear 属性的基本取值
clear 属性有以下几个常用值：
- left：元素左侧不允许有浮动元素，会下移到左边浮动元素的下方。
- right：元素右侧不允许有浮动元素，会下移到右边浮动元素的下方。
- both：元素左右两侧都不允许有浮动元素，会下移到任意浮动元素的下方（最常用）。
- none：默认值，允许两侧存在浮动元素，不进行清除。
如何使用 clear 清除浮动
假设有两个浮动的 div，第三个 div 希望显示在它们下面而不是旁边，可以这样处理：
<div style="float: left; width: 100px; background: #ccc;">左浮动</div> <div style="float: right; width: 100px; background: #cfc;">右浮动</div> <div style="clear: both;">我出现在它们下方</div>
通过给最后一个 div 设置 clear: both;，它就会自动换行并显示在前面两个浮动元素的下方。
立即学习“前端免费学习笔记（深入）”；
常见清除浮动的实践方法
除了直接给下一个元素加 clear，还有几种常见的清除浮动技巧：
- 添加空元素 + clear：在浮动元素后添加一个空 div，并设置 clear:both。虽然有效但不够语义化。
- 使用伪元素清除法（推荐）：通过 ::after 伪元素插入内容并清除浮动，更现代且无需额外标签。
例如，为包含浮动元素的父容器定义一个clearfix类：
.clearfix::after {
content: "";
display: block;
clear: both;
}
然后将该类应用到父元素上，即可防止子元素浮动导致父容器高度塌陷。
总结
clear 属性是解决浮动布局问题的基础手段，合理使用 clear: both 能有效控制元素位置。在实际开发中，推荐结合伪元素方法实现更干净、可维护的清除浮动方案。基本上就这些，不复杂但容易忽略。
