clear: both 对 position: absolute 元素无效，因其已脱离文档流，不参与浮动清除机制；正确做法是调整定位参考点、避免混用 float 与 absolute，或改用 flex/grid 布局。
clear: both 对 position: absolute 元素完全无效，这不是 bug，而是 CSS 布局模型的底层设计决定的——它压根不参与文档流，自然也不响应任何针对文档流的清除逻辑。
clear: both 为什么对 absolute 元素不起作用
clear 属性只影响处于常规文档流中的块级元素，它的作用机制是“计算当前元素的上边界，使其不低于前面指定方向浮动元素的下边界”。而 position: absolute 元素已脱离文档流，浏览器在布局时直接跳过它对流式位置的依赖，也不会检查它前面有没有浮动元素。
-
clear: both写在position: absolute元素自身上：样式会被解析，但 computed styles 中clear值始终为none，因为该属性对脱离流的元素无意义 - 试图用
clear: both“推开”一个 absolute 按钮，让它避开左侧浮动图片：不可能成功，按钮定位参考点是最近的position: relative祖先，跟浮动无关 - 给 absolute 元素的父容器加
clear: both：同样无效，因为父容器若本身未参与流（比如也设了position: absolute或float），clear 就失去作用对象
想让 absolute 元素“避开”浮动区域，该怎么做
不能靠 clear，得换思路：要么控制它的定位参考点，要么调整浮动本身的范围，让两者物理上不重叠。
- 如果 absolute 元素本该相对于某个浮动容器定位，必须确保该容器显式设置了
position: relative（哪怕它同时有float: left）——否则定位参考是body，位置不可控 - 若想让 absolute 元素出现在浮动内容“下方”，最可靠方式是把它放在 DOM 中浮动容器之后，并设为
position: static（即回归文档流），再用clear: both；之后如需再绝对定位，应改用transform或包裹一层position: relative容器来微调 - 避免在同一个容器内混用
float和position: absolute子项——浮动子项可能被渲染引擎忽略其 float 行为（尤其当父容器是 flex/grid），导致你预设的“避开”逻辑彻底失效
现代项目里更推荐的替代方案
继续用 float + absolute 组合，本质上是在维护一套已被淘汰的布局范式。真正省心的解法是绕开 float。
- 用
display: flow-root替代 clearfix：父容器加这个就能包裹内部浮动，后续兄弟元素（包括 static 的 footer）自然不会上浮，无需任何 clear - 把整个布局升级为
display: flex或display: grid：浮动元素在 flex/grid 容器中会自动变成普通子项，clear彻底无用武之地，absolute 元素也更容易通过align-self或justify-self控制位置 - 如果必须保留浮动（如兼容老代码），就把 absolute 元素移出浮动影响区域——例如用
margin-left手动腾出左侧浮动宽度，或用inset配合max-width限定其可渲染范围
最容易被忽略的一点：当你发现 clear: both 对某个元素没反应，第一反应不该是调权重或加 !important，而是打开 DevTools 看一眼它的 position 和 display 计算值——很多“失效”其实发生在写样式之前，元素早就脱离流了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
