clear只作用于同父容器内紧邻的前一个浮动兄弟元素，不跨父容器查找，也不向上追溯祖先浮动；若元素与浮动元素无共同父级或DOM不紧邻，则clear失效。
clear只看同级兄弟，不跨父容器查找
clear 属性根本不会向上或向外查找浮动元素。它只检查自己在当前父容器内的**前一个同级兄弟元素**是否浮动，且二者必须共属同一父级 DOM 节点。如果浮动元素在 .sidebar 里，而你想清除的元素在 .main 里，哪怕它们在 HTML 中视觉上“挨着”，clear: both 也完全无效——因为它们没有共同父容器，更谈不上“紧邻兄弟”关系。
浮动元素脱离文档流，跨容器无参照物
浮动元素（如 float: left）已脱离标准文档流，它对其他父容器下的元素不构成布局约束。浏览器计算 clear 时，只扫描同一格式化上下文（即同一父容器的 BFC）内、DOM 顺序在前的浮动兄弟。一旦跨出这个边界，就等于“看不见”那些浮动——不是清不了，是压根不查。
- DOM 结构如
<div class="nav"><div class="item" style="float:left"></div></div> <div class="content" style="clear:both"></div>：后者不在.nav内，clear无任何可比对象 - 即使两个容器并列、CSS 里用
display: flex横向排列，也不改变 clear 的作用域——它不认视觉位置，只认 DOM 树层级 - 注释节点
<!-- -->、空文本节点、display: contents容器都会打断“同级紧邻”链，导致 clear 失效
为什么加了 clear:both 却没下移？检查 display 和文档流状态
clear 对非块级、非文档流元素静默忽略。常见失效场景包括：
-
clear: both写在<span></span>或<a></a>上：默认display: inline，浏览器直接跳过计算 - 写在已设
float: left或position: absolute的元素上：该元素已脱离文档流，clear 无意义 - 父容器用了
display: flex或display: grid：子项自动进入弹性/网格上下文，float和clear均被规范禁用（Firefox 除外，但属兼容性陷阱）
用开发者工具检查 Computed 面板里的 display 值，若不是 block、flow-root、table、flex 或 grid，clear 就不会起效。
立即学习“前端免费学习笔记（深入）”；
想影响父容器外部？别用 clear，换 BFC 或布局模型
clear 本质是微调单个块的位置，不是通信机制。它无法让父容器外的元素“感知”到另一个容器里的浮动。真正需要的是打破文档流隔离：
- 用
display: flow-root给浮动容器自身创建 BFC，让它能正确撑高——这才是解决塌陷的正路 - 改用
display: flex或display: grid替代浮动布局，从源头消除 clear 需求 - 若必须保留浮动结构，且需跨区域协调，靠 JS 获取高度 +
margin-top手动对齐，比硬套 clear 更可控
最易被忽略的一点：你看到的“clear 不起作用”，往往不是属性写错了，而是误以为它能跨容器生效——而它连父容器的上一级都够不到。
