浮动是为图文环绕场景设计的 CSS 排版工具，常见问题是会导致父容器高度塌陷；定位则是为精准定位元素位置而存在的坐标机制，通常会脱离文档流；两者用途完全不同，混合使用很容易造成页面布局错乱。
CSS 定位和浮动并不是“哪个更好”的对比关系，而是分别解决不同类型的布局问题：float 主要用于图文混排和文字环绕，position 则用于精确控制元素坐标位置。如果随意替换或混用，往往会引发布局异常，影响页面展示效果。
float 会让文字围绕元素排列，但父容器高度容易塌陷
当给图片设置 float: left 时，正文内容会自动贴近图片并形成文字环绕效果——这正是浮动在 CSS 布局中的核心用途。不过它的副作用也很明显：parent div 的高度可能变成 0，导致背景色、边框无法正常显示，后面的内容也可能覆盖上来。
- 必须手动清除浮动，常见方式包括给父容器设置
overflow: hidden或display: flow-root（更推荐） float只对display计算值为block或table的元素有效，inline内联元素即使设置了也不会生效- IE6/7 中常见的双倍
marginbug 在旧项目维护时仍可能出现，兼容性排查不能忽视
position: absolute 完全不占据文档流位置，top/left 依赖最近的 relative 父级
绝对定位元素可以理解为被“从文档流中拿出来”再放到指定位置，周围其他元素会直接忽略它的存在。但它既不会自动形成文字绕排，也不会撑开父元素高度——例如在父级没有显式高度时，height: 100% 通常会直接失效。
- 如果父容器没有设置
position: relative，那么top: 20px往往会相对于整个视口或更外层已定位祖先定位，元素很容易出现“飘走”现象 z-index只会在已经创建新层叠上下文的祖先范围内生效；单独使用float并不会创建层叠上下文- 屏幕阅读器通常仍然可以读取绝对定位元素，但它在视觉上已经脱离正常文档流，无障碍场景下需要结合
aria-hidden或额外的逻辑处理
relative 和 float 看起来都能“移动”元素，但是否保留原位置完全不同
position: relative 是定位方式中唯一不会脱离文档流的形式：元素虽然在视觉上发生偏移，但原本所占据的位置依然保留，后续元素不会补上来；而 float 元素移动后，块级兄弟元素会占据它原来的位置，只有文本内容会围绕它进行排版。
margin: 0 auto在position: absolute或float元素上通常都无法实现常规居中，居中更适合使用left: 50%; transform: translateX(-50%)或 flex 布局- 浮动元素设置
vertical-align不会生效，但relative元素可以借助该属性做细微对齐调整 - 不要给父级同时设置
position: absolute——父绝对子绝对的组合很容易导致父容器高度塌陷、后续内容上移，是实际开发中的典型错误
还有一个在现代 CSS 布局中常被忽略的重点：无论是 float 还是 absolute，都不适合承担页面主结构布局。真正适合做容器级排列的是 Flexbox 和 Grid；float 更适合保留在图文环绕这类少数语义明确的场景中，而 absolute 则更适合用于悬浮元素、角标提示、弹窗定位等需要脱离上下文的局部控制场景。
