现代项目中position仍用于模态框等局部精控，float仅存于图文环绕或老项目兼容；整页布局应使用flex或grid，二者非同类工具且不可混用。
现代项目里，position 的使用频率远高于 float，但两者根本不是同一类工具——float 几乎只在图文环绕或极老项目兼容场景中出现；position（尤其是 absolute、fixed、sticky）仍在大量用于模态框、下拉菜单、悬浮按钮、固定导航等局部精控场景。
float 现在基本只用在图文环绕
浏览器早已不靠它做布局了。如果你看到某段 CSS 还在用 float: left 搭两栏，那大概率是维护老代码，或者没更新技术栈。真正还在用的，只有类似这样的场景：
- 文章页里一张图片左浮、文字自动绕排，且不需要响应式重排
- 某些 CMS 输出的富文本内容，后端硬编码了
float类，前端只能兼容 - 需要支持 IE8–9 的嵌入式设备页面（2026 年已极少见）
一旦涉及宽度自适应、换行、对齐控制或移动端适配，float 就会立刻暴露缺陷：无法设置偏移量、不能上下浮动、z-index 无效、父容器高度塌陷必须手动清浮——这些都不是“写法问题”，而是机制限制。
position 是局部精控不可替代的方案
position 不是用来搭整页结构的，但它是解决“这个元素必须贴着那个元素右下角”“这个弹窗要盖在所有内容之上”“这个返回顶部按钮永远停在视口右下”这类问题的唯一合理手段。关键点在于：
立即学习“前端免费学习笔记（深入）”；
-
absolute必须配合一个position: relative的父容器才能准确定位，否则会一路往上找，直到<html> -
fixed和sticky对滚动行为敏感，sticky的阈值（如top: 10px）必须设在有高度的父容器内才生效 -
z-index只对定位元素（relative/absolute/fixed/sticky）起作用，float元素永远在默认层叠上下文中
别再拿 float 和 position 做布局对比
这种对比本身已经过时。整页结构该用 display: flex 或 display: grid ——它们能一行代码实现居中、等宽、换行、对齐，且天然响应式。float 和 position 都不是为“页面级布局”设计的：float 是为杂志排版生的，position 是为 UI 组件微调生的。强行用它们搭栅格，等于拿螺丝刀当锤子使。
最容易被忽略的是参考系混乱：比如给一个 float: right 的元素又加 position: absolute，结果它既不按浮动规则走，也不按定位规则锚定——因为 float 在 position: absolute 下完全失效。这种组合不是“高级技巧”，是调试噩梦的起点。
