clear 属性对 position: absolute 元素完全无效，因其已脱离文档流，不参与普通流布局与 clear 约束；真正问题常是定位上下文缺失或 overflow: hidden 裁剪所致。
clear 属性对 position: absolute 元素完全无效
clear 只作用于「处于普通流中且浮动的兄弟元素」，而 position: absolute 元素已脱离文档流，既不参与块级格式化上下文（BFC）的高度计算，也不受 clear 的约束逻辑影响。浏览器在布局阶段直接跳过它对 clear 的响应。
常见误用场景：给父容器加 clear:both 没用
很多人试图在绝对定位元素前插入一个 <div style="clear: both"></div>，期望“推开”它——但该 div 只会影响后续普通流中的浮动兄弟，对已脱离流的绝对定位元素毫无作用。此时你看到的“没被推开”，不是 clear 失效，而是它压根就不该管这个元素。
- 绝对定位元素的位置由
top/left和最近已定位祖先决定，和周围浮动元素无布局关系 - 即使父容器设置了
clear: both，也不会改变子元素的定位参考点或渲染顺序 - 若想让绝对定位元素避开浮动区域，必须手动计算偏移（如
left: 200px）或改用其他定位策略（如inset+margin）
真正需要解决的问题其实是定位上下文缺失
下拉菜单、弹层等绝对定位元素“跑出屏幕”或“被裁切”，90% 不是因为 clear 没起作用，而是因为：父级没设 position: relative，导致它默认相对 body 定位；或者父容器用了 overflow: hidden 清浮动，意外把溢出部分裁掉了。
- 检查
position: absolute元素的最近祖先是否设置了position: relative/absolute/fixed - 避免在提供定位上下文的容器上同时使用
overflow: hidden—— 改用display: flow-root - 如果必须用
overflow清浮动，确保它加在更外层、不包裹绝对定位后代的容器上
替代 clear 的现代方案：用 display: flow-root 清浮动
相比 overflow: hidden，display: flow-root 是唯一既能包含浮动、又不触发裁剪或新层叠上下文的清除方式。它不会干扰 position: absolute 元素的渲染边界，也不会影响 z-index 层级逻辑。
示例：
nav > ul { display: flow-root; }<br>nav > ul > li { float: left; position: relative; }<br>nav > ul > li > ul { position: absolute; top: 100%; left: 0; }
关键点在于：浮动和绝对定位各走各的路，互不绑架。最容易被忽略的是，开发者常把清除浮动和提供定位上下文这两件事混在一个容器上做——这正是绝大多数“下拉被切”“弹层错位”的根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
