定位解决单个元素精确定位，Flex解决多子元素协调分布；定位适合脱离文档流的局部控制，Flex适合一维内容排列与对齐，浮动已基本淘汰。
定位（position）和 Flex 布局解决的是不同层级的布局问题：定位关注“单个元素在空间中的精确落点”，Flex 关注“多个子元素在容器内的协调分布”。选哪种，取决于你要解决的是“放哪儿”还是“怎么排”。
定位适合控制局部、脱离流的精确定位
当你需要让某个元素固定在屏幕某处、悬浮在内容上方、或作为弹窗/提示框出现时，position 是更直接的选择。
- fixed：做吸顶导航栏、返回顶部按钮，始终相对于视口，滚动不移位
- absolute：做下拉菜单、气泡提示（tooltip），以最近有定位的父容器为参考系
-
relative：不脱离文档流，常用来给子元素提供
absolute的定位上下文，或微调位置而不影响其他元素
注意：绝对/固定定位的元素会脱离文档流，可能覆盖其他内容，需配合 z-index 管理层叠顺序，响应式调整也较依赖手动计算。
Flex适合一维内容排列与对齐
当目标是让一组子元素在一行或一列中均匀分布、居中、等宽、自动换行时，Flex 是现代首选。
立即学习“前端免费学习笔记（深入）”；
- 垂直+水平居中只需两行代码：
display: flex; justify-content: center; align-items: center; - 导航栏左右分置：
justify-content: space-between - 卡片列表自适应宽度：
flex: 1或flex-grow: 1
Flex 天然支持内容动态变化，子项尺寸不确定时依然稳定；它不脱离文档流，不影响周围布局，响应式适配也更自然。
浮动已基本淘汰，仅用于兼容或特殊环绕场景
浮动（float）最初为文字环绕图片设计，后来被滥用于页面布局，但带来高度塌陷、清除浮动等额外负担。
- 现代项目中几乎不用它做整体布局
- 仅在极少数兼容旧浏览器需求，或需要
shape-outside实现非矩形文字环绕时保留 - 替代方案明确：文字环绕用
float+shape-outside；布局一律用 Flex 或 Grid
简单判断：先看容器，再看需求
遇到一个新布局任务，可按顺序问自己：
- 这个元素是否需要脱离正常文档流？→ 是 → 考虑
position: absolute/fixed - 是否要控制多个子项的排列方向、间距、对齐方式？→ 是 → 用
display: flex - 是否涉及二维网格（如仪表盘、相册墙）？→ 是 → 升级到
display: grid - 是否只是老项目维护，且必须兼容 IE8–9？→ 是 → 才考虑
float清除方案
多数日常场景——导航、表单、卡片列表、模态框内部结构——Flex 更简洁可靠；而固定按钮、浮层、锚点高亮等“附加型”元素，用定位更合理。
