clear: both 并非清浮动，而是让块级元素避开前一个同父级的浮动兄弟；对行内元素、非块级盒、跨父容器或flex/grid容器中的元素均无效，解决父容器塌陷应优先用display: flow-root。
clear: both 不是“清浮动”，而是让当前元素避开前一个浮动兄弟——它只在特定结构下起作用，绝大多数失效都源于对这个前提的忽略。
clear: both 只对块级元素生效
行内元素（如 <span></span>、<img>）加了 clear: both 也白加。浏览器会静默忽略，因为规范明确要求作用对象必须是块级盒（block-level box）。
-
<img>默认是display: inline，必须显式加display: block才能触发clear <div> 虽默认块级，但若被父级设为 <code>display: inline-flex或display: contents，它就不再是块级盒- 用开发者工具看 Computed 面板里的
display值，不是block、flex、grid、table等，clear就不启动 - 错误结构：
<div class="sidebar"><div class="float"></div></div> <div class="main"><div class="clear"></div></div>——.clear和浮动不在同一父级，无参照物 - 检查方法：右键 → “Reveal in Elements panel”，确认浮动元素和
clear元素是否在同一个父<div> 下，且后者在 HTML 源码中紧接其后 <li>浮动元素自己不能设 <code>float同时又加clear: both，它已脱离文档流，clear失去作用对象 - DevTools 中这些属性常被标为删除线或“invalid”
- 想让某个 Flex 子项换行，该用
flex-wrap: wrap+flex-basis: 100%，而不是clear: both - 如果项目已用 Flex/Grid，还硬塞
float/clear，后续维护成本会指数级上升 - 现代标准解法：
display: flow-root，一行代码，无裁剪、无层叠上下文副作用，Chrome 64+/Firefox 59+ 均支持 - 兼容旧版可选
overflow: hidden，但会裁剪position: absolute溢出内容，慎用于弹窗类组件 - 别在浮动子项上堆
clear，尤其多层嵌套时——它不穿透父容器，漏一层整条链就断
clear 元素必须紧邻浮动兄弟且同属一父容器
clear: both 不查全局，只看自己在 DOM 中的**前一个同级兄弟元素**是否浮动。中间插个注释、空文本节点、display: contents 包裹层，或跨了父容器，“紧邻”关系就断了。
Flex/Grid 容器里 clear: both 完全无效
只要父元素是 display: flex 或 display: grid，子元素的 float 和 clear 都会被浏览器忽略。这不是 bug，是格式化上下文切换导致的机制失效。
真正要解决的往往不是 clear，而是父容器塌陷
多数人加 clear: both 其实是想让父容器包住浮动子项（即解决高度塌陷），但 clear 本身做不到这点——它只推下一个元素，不撑开父级。
最容易被忽略的一点：你写的 clear: both 很可能根本没地方起效——目标元素既不是块级，也不在浮动兄弟之后，甚至还在 Flex 容器里。先确认这三点，再决定要不要删掉它，换成 display: flow-root。
