float 脱离文档流但不脱离格式化上下文，文字绕行且影响布局；absolute 和 fixed 完全脱离文档流，前者相对定位祖先，后者相对视口；flex/grid 不脱离流即可实现高效布局。
float 脱离文档流但不脱离格式化上下文
用 float 的元素会从普通文档流中“抽出来”，但依然会影响周围行内内容的排版——比如文字会绕着它走。它没完全消失，只是换了个位置“参与布局”。浏览器仍把它当作浮动上下文的一部分，所以父容器高度塌陷是常见副作用。
常见错误现象：parent div 高度为 0，子元素 float: left 后看不见背景或边框；clear 没加对，导致后续元素错位。
- 必须手动触发 BFC（比如给父容器加
overflow: hidden）或用clear: both元素撑开高度 -
float只对display: block或table类型生效，inline元素设了也无效 - IE6/7 对
float的双倍 margin bug 仍可能影响老项目兼容性
position: absolute 完全脱离文档流
position: absolute 的元素既不占空间，也不影响其他元素布局，连文字环绕都不会发生。它的定位基准是最近的已定位祖先（position 为 relative、absolute 或 fixed），没有就回退到初始包含块（通常是视口）。
使用场景：弹窗、下拉菜单、图标角标、固定提示层。
立即学习“前端免费学习笔记（深入）”；
- 父容器若没设
position: relative，top/left会相对于整个页面定位，容易飘走 - 绝对定位元素无法触发父容器的 min-height 计算，
height: 100%在无显式高度父级里无效 - 屏幕阅读器仍能读取它（除非加
aria-hidden），但视觉上“消失”了，无障碍需额外处理
position: fixed 也脱离文档流，但锚点是视口
position: fixed 和 absolute 一样不占文档流位置，区别在于它的定位参考系永远是视口（viewport），滚动时保持不动。这使得它天然适合做导航栏、返回顶部按钮。
容易踩的坑：fixed 元素在 iOS Safari 中可能因输入框唤起软键盘而错位；部分安卓 WebView 对 transform 和 fixed 共存支持差。
- 在
transform父容器里，fixed会降级为相对该容器定位（Chrome 59+、Safari 15.4+ 修复，但旧版本仍存在） - 不要依赖
fixed做响应式侧边栏——它不随父容器缩放，宽度计算容易失准 -
z-index必须显式设置，否则可能被其他 stacking context 盖住
现代替代方案：flex / grid 不脱离文档流也能实现类似效果
浮动和绝对定位本质是“绕开布局规则强行摆位”，而 display: flex 和 display: grid 是在文档流内部重新定义排列逻辑。它们不脱离流，却能轻松实现左对齐、居中、等分布局。
性能影响：flex/grid 触发的是 Layout + Paint，而频繁修改 top/left 的 absolute 元素可能引发重排（尤其是配合 JS 动画时）。
-
justify-content: flex-end比float: right更可控，不会导致父容器塌陷 - grid 的
grid-column: 1 / -1可让子项横跨所有列，比position: absolute+width: 100%更健壮 - IE11 支持
flex但不支持gap，用margin模拟时要注意最后一项多出的间距
脱离文档流不是目的，是手段。真正难的是判断什么时候该“抽出来”，什么时候该“重新组织流”——比如一个按钮要悬浮在卡片右上角，用 relative + absolute 是合理选择；但整页三栏布局还用 float，就等于绕路修桥。
