clear属性通过强制元素避开上方浮动区域来解决浮动导致的布局错乱，而非清除浮动本身；它只对块级元素生效，常用值为left、right、both和none，正确用法是在浮动后首个块级元素上设clear: both或用伪元素clearfix方案。
clear属性为什么能清除浮动影响
浮动元素会脱离文档流，导致父容器高度塌陷、后续元素位置错乱。而 clear 属性的作用不是“清除浮动本身”，而是**强制元素避开上方浮动区域**——它让当前元素的外边框（border box）不与前面的浮动元素在同一水平线上，从而形成视觉上的“断开”。这是 CSS 布局中应对浮动副作用最直接的机制。
clear常用的取值和对应行为
clear 只对块级元素生效，常见取值如下：
-
clear: left：元素的左边不能紧贴任何左浮动元素 -
clear: right：元素的右边不能紧贴任何右浮动元素 -
clear: both：左右都不能紧贴浮动元素（最常用） -
clear: none：默认值，不避开任何浮动
注意：clear 不会影响浮动元素自身，只约束应用它的那个元素的位置。它不会让父容器自动撑高，这点常被误解。
在什么位置加clear才能真正解决问题
很多人把 clear 加在浮动元素自己身上，这毫无意义；也有加在父容器上，但父容器没设置高度或未触发 BFC，依然塌陷。正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 在浮动元素之后、需要恢复正常流的第一个块级元素上设置
clear: both - 若不想依赖额外标签，可用伪元素方案：
::after在父容器末尾插入并清除 - 避免用
clear处理多层嵌套浮动布局，容易失控；此时应优先考虑display: flex或display: grid
例如，一个常见修复写法：
.clearfix::after {
content: "";
display: table;
clear: both;
}
然后给浮动容器添加 class="clearfix"。
clear和BFC清除浮动的区别在哪
clear 是“绕开”浮动，BFC（如 overflow: hidden）是“包含”浮动——后者让父容器生成独立布局上下文，从而包裹住内部浮动子元素，自然撑高。两者目标一致，但原理不同：
-
clear简单直接，适合单层浮动收尾 - BFC 更彻底，但可能带来意外裁剪（比如
overflow: hidden会截断阴影或下拉菜单） -
display: flow-root是现代推荐的 BFC 触发方式，无副作用，兼容性已覆盖主流浏览器
浮动本身已是过时布局手段，clear 的使用场景越来越窄，但它仍是理解 CSS 流式布局和定位逻辑的关键切口。真正容易被忽略的是：清除浮动不是目的，让内容按预期排列才是——别为了加 clear 而加 clear。
