浮动与定位本质不同：浮动专为文字环绕设计，半脱离文档流且仅左右靠边；定位用于精确坐标控制，absolute/fixed 完全脱离文档流，支持四向偏移与 z -index，现代布局优先用 Flexbox/Grid，浮动仅用于图文环绕等少数场景。
定位和浮动都能让元素离开默认位置，但它们的设计目标、行为逻辑和适用场景完全不同。
核心目的不同
浮动（float）最初只为实现“文字环绕图片”这种排版效果而生，比如杂志里图片左置、正文绕排。后来被借用来做多列布局，但本质仍是流式内容的辅助 排列 方式。
定位（position）从一开始就是为精确控制元素坐标服务的，比如弹窗贴着按钮右下角出现、导航栏固定在顶部、提示框随鼠标移动等。
对文档流的影响不同
浮动元素 半脱离文档流 ：它不再占据正常块级空间，父容器容易塌陷；但文本和内联内容仍会识别它，并绕行排布。
定位中只有 absolute 和 fixed 是 完全脱离文档流：它们不占位，也不影响其他元素的布局，就像浮在页面上的一层玻璃。
- relative 不脱离文档流，原位置保留，只是视觉偏移
- static（默认）完全遵循文档流，top/left 等无效
- sticky 是 relative 和 fixed 的混合体，滚动到临界点才固定
定位参考基准不同
浮动总是向左或向右“靠边”，参考的是父容器的内边缘，或者前一个同向浮动元素的外边缘。
绝对定位 （position: absolute）则参考 最近的已定位祖先元素 （即 position 值不是 static 的祖先）；如果没有，就退回到视口（ 浏览器 窗口）。
立即学习 “ 前端免费学习笔记（深入）”；
- float: left; → 贴父容器左边，后面元素绕它排
- position: absolute; top: 10px; left: 20px; → 相对于最近那个设置了 relative/absolute/fixed 的父级
控制自由度与现代用法
浮动只能左右二选一，不能设偏移量，也不能调层级（z-index 对纯浮动无效）；它没有响应式天性，适配移动端需额外处理。
定位支持 top/right/bottom/left 四向像素级控制，配合 z-index 可叠层，sticky 还能响应滚动，灵活性高得多。
- 现在做整体布局，优先用 Flexbox 或 Grid
- 局部微调、悬浮组件、固定元素，用 position 更直接可靠
- float 仅保留在图文环绕、兼容极老项目等少数场景
