float 和 position 不能在同一元素上共存，position 非 static 时 float 失效；二者应分工协作：float 用于文本环绕或流式布局，position 用于脱离文档流的精确定位。
float 和 position 不能同时生效
当你给一个元素同时设置 float: left 和 position: absolute（或 fixed、sticky）时，float 会被完全忽略。浏览器规范明确：只要 position 值不是 static，float 就失效。这不是 bug，是 CSS 渲染规则决定的。
所以“结合使用”不是指同一个元素上共存，而是指在不同层级、不同目的的元素间分工协作：
-
float用于文本环绕、老式多栏流式布局（如图文混排） -
position用于脱离文档流的精确定位（如悬浮按钮、下拉菜单、弹窗遮罩）
常见误用：给浮动元素加 relative 定位来微调位置
给 float 元素设 position: relative 确实不会让 float 失效，但它只影响该元素自身的定位上下文，不影响其浮动行为——也就是说，它依然会参与浮动流，只是自己的子元素可以以它为 position: absolute 的参考点。
但要注意：如果父容器没有清除浮动，relative + float 的组合会让父容器高度塌陷问题更隐蔽，因为视觉上元素还在，但 DOM 高度可能为 0。
立即学习“前端免费学习笔记（深入）”；
典型错误写法：
