浮动与绝对定位混用会导致裁切、错位、clear失效及z-index异常，因二者分属不同布局体系；应改用flex/grid或隔离层叠上下文。
浮动元素被绝对定位父容器裁切
当 position: absolute 的父容器（比如 .modal 或 .dropdown）内部有 float 元素时，浮动元素可能“消失”或只显示一部分——不是真消失了，是被父容器的 overflow: hidden（或 auto）意外裁剪了。
根本原因：绝对定位的父容器一旦形成块级格式化上下文（BFC），而子元素又用 float 脱离文档流，但未触发 BFC 的子元素自身不参与高度计算，导致父容器高度塌陷；此时若父容器还设置了 overflow，浏览器会按“计算出的高度”去裁剪内容，浮动元素就溢出了可视区。
- 别在
position: absolute/fixed容器里用float布局，这是最直接的规避方式 - 如果必须保留浮动（比如老代码兼容），给父容器加
overflow: visible（注意：这可能影响遮罩、滚动等交互逻辑） - 更稳妥的替代：把浮动换成
display: inline-block或 Flex（display: flex），它们不脱离文档流，且与绝对定位父容器共存无副作用
绝对定位元素无视浮动兄弟节点的布局影响
position: absolute 元素完全脱离文档流，它不会给旁边的 float 元素“让位”，也不会被浮动元素推挤——看起来像“叠在上面”，但其实连层叠上下文都不一定相同。
典型现象：一个右浮动的按钮（float: right）和一个绝对定位的提示气泡（top: 0; right: 0）在同一容器内，气泡位置看似正确，但窗口缩放后错位；因为浮动按钮的位置随内容宽度动态变化，而绝对定位元素只认父容器的 padding box，两者基准不一致。
立即学习“前端免费学习笔记（深入）”；
- 不要指望
float和absolute在同一层级“协同布局”——它们压根不在同一个布局体系里 - 如果需要对齐浮动元素，改用 JavaScript 动态读取
getBoundingClientRect()计算位置，或提前把浮动元素转成相对定位 + margin 模拟 - 现代方案：统一用 Flex 或 Grid，
float仅用于图文环绕等极少数语义场景
清除浮动失效：absolute 父容器不响应 clear
在 position: absolute 容器里写 clear: both，几乎没用。因为 clear 只对**正常流中的块级元素**生效，而绝对定位容器本身已脱离流，其内部的 clear 无法影响外部浮动元素，也无法让自身“感知”到浮动边界。
常见错误：想用 clear 解决绝对定位弹窗底部被页面右侧浮动广告顶开的问题——失败。因为弹窗是绝对定位，它根本不参与页面主文档流的浮动影响链。
-
clear不是万能清道夫，它只在常规文档流中起作用 - 真正要解决“被外部浮动顶开”，得从弹窗的
top/bottom值入手，或给弹窗加transform: translateZ(0)强制创建新层叠上下文（有时可绕过渲染异常） - 更可靠的做法：确保全局浮动区域有明确容器包裹，并设
clear在容器外，而不是依赖弹窗内部处理
z-index 失效的隐藏诱因：浮动引发的层叠上下文分裂
当一个绝对定位元素的父容器设置了 float（哪怕只是临时加个 float: left 调试），同时又设置了 z-index，就可能发现该元素被其他没设 z-index 的元素盖住——不是 z-index 没生效，而是父容器因 float 触发了新的层叠上下文，把 z-index 的比较范围锁死在局部了。
这种问题很难排查，因为控制台看不出层叠上下文变化，只看到“明明写了 z-index 100 却被 z-index: auto 盖住”。
- 浮动元素本身会创建新的层叠上下文（只要它不是
static定位） - 绝对定位元素的
z-index只在**最近的层叠上下文内有效**，不是全局比大小 - 检查是否误给父级加了
float、opacity、transform等隐式创建层叠上下文的属性 - 调试技巧：在 Chrome DevTools 的 Layers 面板里看“Composited layers”，确认是否多出了非预期的合成层
