clear 属性在现代布局中已基本失效，仅对传统文档流中的 float 生效，且依赖 dom 顺序；在 flex/grid 容器中被忽略，无法解决高度塌陷或 bfc 缺失问题。
因为它们只对特定方向的浮动生效，且依赖 DOM 顺序和布局结构，稍有偏差就失效；而现代布局已不再依赖 float，clear:left/right 失去存在基础。
clear:left 只认前面的 float:left 兄弟
它不是“清除左边的浮动”，而是让当前元素下移，直到它的上边框不和任何 float: left 的前序兄弟元素重叠。如果前一个兄弟是 float: right 或没浮动，clear: left 就完全不触发——连计算都不做。
- 常见错误：给正文加
clear: left，但左侧导航栏在 HTML 中写在正文后面，浏览器根本“看不见”它，清除无效 - 调试时看到元素没下移，先检查开发者工具里目标元素上方最近的兄弟元素是否真有
float: left且 DOM 位置靠前 - 响应式中右侧广告栏在小屏转为普通流，
clear: left还能用，但clear: both会多等一个已消失的右浮动，产生空白
clear:right 在多数浏览器里表现不稳定
clear: right 要找前面的 float: right 兄弟，但右浮动常“后写先占位”，DOM 顺序和视觉顺序错位。Firefox 经常漏算，Chrome/Safari 结果也不一致。
- 常见错误：
clear: right加了但元素没下移；配合margin-right或transform时直接被忽略 - 它对
position: absolute元素无效，对 flex/grid 容器内的子项也无效（声明会被划掉） - 真正需要右对齐时，
text-align: right或margin-left: auto更可靠，不用猜浮动锚点
flex 和 grid 布局让 clear 属性整体失效
只要父容器是 display: flex 或 display: grid，子元素设 float 会被忽略，clear 声明也会被 CSS 引擎跳过——这不是 bug，是规范行为。
- 容易踩的坑：在 React/Vue 组件里给根元素写
clear: left，但父容器用了display: flex，结果样式在开发者工具里显示为划掉状态 - 此时想实现类似效果，得换思路：
margin-top留空、align-self: flex-start控制对齐，或把图文放进同一个 flex 容器用order调序 - 哪怕你显式写了
float: left，只要父容器启用了 flex/grid，这个 float 就不参与布局计算
真正难处理的不是 clear:left/right 本身，而是人们误以为它们能“修复浮动”，结果发现父容器高度还是塌陷、右侧浮动内容依然压着文字——因为 clear 从不解决 BFC 缺失问题，也不影响其他元素。它只是个定位微调开关，而且开关只在传统文档流里才通电。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
