清除浮动本质是解决父容器因子元素浮动导致高度塌陷的问题；clear属性仅控制当前元素边距不紧贴浮动元素，需配合BFC触发、伪元素或flex/grid布局等现代方案彻底解决。
清除浮动的本质，是解决父容器因子元素浮动而无法正确计算高度的问题。当子元素设置了 Float，它会脱离文档流，导致父容器“塌陷”——看起来高度为0，影响后续布局。而 clear 属性本身并不直接“清除浮动”，它只是控制元素的边不能紧贴前面浮动元素的边缘。
clear 属性真正的作用
clear 用于指定元素的上边（或下边）不允许紧邻前一个浮动元素。它不改变浮动元素本身，也不修复父容器高度，只影响当前元素的位置：
-
clear: left：元素上边不能挨着左侧浮动元素 -
clear: right：元素上边不能挨着右侧浮动元素 -
clear: both：元素上边不能挨着任何方向的浮动元素（最常用） -
clear: none：默认值，不限制
为什么 clear 不能单独“清除父容器浮动”
很多人误以为给父容器加 clear: both 就能解决塌陷，其实无效——因为 clear 只对“块级盒”在**正常流中**起作用，而父容器自身没浮动、也没触发 BFC，clear 对它无意义。真正起作用的是：在父容器末尾插入一个设置了 clear: both 的空元素（如
），把它“顶下去”，从而撑开父容器。
更现代、推荐的清除浮动方式
比起依赖 clear 和额外标签，以下方法更可靠且语义清晰：
立即学习“前端免费学习笔记（深入）”；
- BFC 触发法：给父容器设置
overflow: hidden、overflow: auto或display: flow-root（推荐，专为此设计） - ::after 伪元素法：用 css 在父容器末尾生成一个清除浮动的伪元素，无需 html 改动
- Flex/Grid 布局替代：现代布局中，用
display: flex或display: grid替代浮动，从根本上避免问题
clear 的典型使用场景
clear 最合理的用途，是控制**紧跟在浮动元素之后的普通块级元素**的位置，例如：
- 图文混排中，让一段说明文字不环绕图片，而是从图片下方完整开始
- 多列浮动导航后，让页脚不被浮动项“吸上去”，而是稳定出现在底部
- 表单中左右浮动的 label 和 input 后，用
clear: both确保提交按钮独占一行