float是半脱离文档流，文字环绕但父容器易塌陷；absolute是完全脱离，不占空间、支持精准定位和z-index，二者本质不同不可互换。
Float 和 position: absolute 都会让元素“看起来不在原位”，但它们脱离文档流的方式、影响范围和后续处理逻辑完全不同——不能互换，也不能混用解决同一类问题。
float 是半脱离：文字会绕它走，父容器却可能塌陷
float 元素仍参与块级格式化上下文（BFC）的计算，所以父容器能感知它的存在，但不自动撑高。典型现象是：float: left 的子元素一加，父 div 高度变成 0，背景色/边框消失。
- 文字、内联内容会为它让出空间并环绕（这是设计初衷，模拟图文混排）
- 相邻的非浮动块级元素（如另一个
div）不会环绕它，但会从它“结束的位置”开始布局（常被误认为“被挤下去”） - 必须手动清除浮动，否则塌陷持续影响后续布局；常用手段是给父容器加
overflow: hidden或伪元素::after { content: ""; display: table; clear: both; } - 不支持
z-index，层叠控制能力弱
position: absolute 是彻底消失：其他元素当它不存在
绝对定位元素完全退出文档流，既不占空间，也不触发环绕，连父容器的高度、min-height、height: 100% 都不受它影响。
- 定位基准取决于最近的
position不为static的祖先；若没有，就相对于定位——这点极易出错，比如忘了给父容器加position: relative，结果弹窗飘到页面左上角 -
top/left等偏移值在无显式宽高的父容器里可能失效，因为参考系高度为 0 - 即使原始是
span，也会自动变成块级行为，但需手动设width/height，否则容易收缩到内容尺寸 - 支持
z-index，天然形成新层叠上下文，可精准控层
为什么不能靠 float 模拟 absolute 的定位效果？
有人试图用 float: left + 大量 margin 把元素“推”到右上角，这在响应式或动态内容下极不可靠。
-
float只能左/右，无法实现bottom: 20px; right: 10px这类任意锚点定位 - 浮动元素仍受兄弟元素顺序和内容宽度影响，
absolute则完全解耦 - 浮动会触发 BFC，可能意外改变父容器的 margin 合并、滚动行为等；
absolute无此副作用 - 无障碍方面：
absolute元素默认仍被屏幕阅读器读取（除非加aria-hidden="true"），而float元素语义未变，但视觉错位后易造成理解断层
真正容易被忽略的点是：float 的“半脱离”本质让它在现代布局中越来越边缘化——flex 和 grid 已接管多列、对齐、自适应等需求；而 position: absolute 因其强控制力，在弹窗、提示层、图标角标等场景仍是不可替代的。选哪个，先看你要不要“留个影子”（float）还是“直接隐身”（absolute）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
