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。
立即学习“前端免费学习笔记（深入）”；
典型错误写法：
.box {
float: left;
position: relative;
width: 200px;
}
.box::after {
content: "";
position: absolute;
top: -10px;
right: -10px;
background: red;
width: 16px;
height: 16px;
}这个 ::after 会相对 .box 定位，但如果 .box 所在的父容器没清除浮动，后续内容可能会上移覆盖。
真正有效的配合方式：float 布局主体 + position 覆盖层
这是最稳定、兼容性好且语义清晰的组合场景。例如侧边栏+主内容浮动排布，再在主内容内叠加一个右上角关闭按钮：
.container {
overflow: hidden; /* 清除浮动 */
}
.sidebar {
float: left;
width: 200px;
}
.main {
float: left;
width: calc(100% - 200px);
position: relative; /* 为绝对定位子元素提供参考 */
}
.close-btn {
position: absolute;
top: 12px;
right: 12px;
background: #ccc;
border: none;
width: 24px;
height: 24px;
}关键点：
-
.main必须有position: relative，否则.close-btn会相对于body或最近的非static祖先定位 -
overflow: hidden是最轻量的清除浮动方式（比::after更早生效） - 不要试图用
float实现“固定在视口右下角”，那是position: fixed的职责
现代替代方案值得优先考虑
除非要支持 IE8 及更早版本，否则不建议用 float 做主布局。Flexbox 和 Grid 在绝大多数场景下更可控、更少副作用：
- 多栏等高布局：
display: flex自动拉伸，无需清除浮动 - 响应式栅格：
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) - 居中、对齐、重排序：
justify-content/place-items比float + margin + position组合直观得多
真正需要 float 的场合越来越少，现在它基本只保留在两个地方：文字环绕图片（img { float: left; margin-right: 1em; }），以及极少数遗留系统维护。
