浮动元素脱离文档流，导致父容器塌陷及定位基准错乱；绝对定位依赖已定位祖先，若其为浮动则尺寸不稳定；现代布局应优先使用Flexbox或Grid替代浮动。
浮动元素会脱离文档流，影响后续定位元素的参照系
当一个元素设置 float: left 或 float: right 后，它会从普通文档流中“抽离”，不再占据原来的空间。后续的定位元素（比如 position: relative 或 position: absolute）如果依赖父容器高度或兄弟元素位置来布局，就可能因浮动导致父容器塌陷、top/left 计算基准偏移等问题。
常见表现：
- 父容器高度为 0（塌陷），导致
position: absolute子元素相对于更上层祖先定位，而非预期的父容器 -
position: relative元素虽保留文档流位置，但若前面有浮动兄弟，其top值可能从浮动元素底部开始计算，而非紧贴上一个块级元素
绝对定位元素无视浮动，但父容器浮动会导致定位基准错乱
position: absolute 的定位始终以最近的「已定位祖先」（position 值为 relative、absolute、fixed 或 sticky）为参考。如果该祖先本身是浮动的（比如 float: left; position: relative），它虽然有了定位上下文，但因为浮动脱离文档流，它的尺寸和位置可能不稳定——尤其在响应式场景下宽度收缩、换行时，absolute 子元素会“悬空”或错位。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 浮动本身不创建新的定位上下文（
position: static不行，必须显式设relative等） - 若父容器仅设
float而未设position，子元素absolute会向上查找，跳过这个浮动父级 - 即使父级同时设
float和position: relative，其宽高仍受浮动影响，可能导致left: 0或right: 0实际偏移出视区
渲染顺序上：浮动先于定位“入场”，但定位可覆盖浮动视觉层
浏览器渲染分三步：构建 DOM → 计算样式（包含 float/position）→ 布局（Layout）→ 绘制（Paint）。浮动元素在 Layout 阶段被“挤出”流，而定位元素按 stacking context 分层绘制。这意味着：
- 浮动元素和
position: relative元素默认同属 document-level stacking context，z-index 无效，谁在 HTML 里靠后谁压在上面 -
position: absolute元素若没设z-index，也属于父级 stacking context，可能被同级浮动元素遮挡（取决于 HTML 顺序） - 一旦给
absolute元素设了z-index: 1，且父容器有定位（如position: relative），它就会升到新层，盖过浮动元素
.container {
position: relative; /* 创建 stacking context */
}
.float-box {
float: left;
width: 200px;
height: 100px;
background: #eee;
}
.abs-box {
position: absolute;
top: 20px;
left: 20px;
z-index: 1; /* 关键：升层后盖过 float-box */
width: 150px;
height: 80px;
background: #007bff;
}现代替代方案比混用更可靠
浮动本意是文字环绕图片，不是做布局。CSS Grid 和 Flexbox 已能稳定处理绝大多数对齐、排列需求。混用 float 和 position 容易在以下情况出问题：
- 父容器没有触发 BFC（如没设
overflow: hidden或display: flow-root），浮动塌陷无法被后代定位元素感知 - 媒体查询中浮动断点变化，但
absolute的top/left值未同步调整 - 使用
transform动画时，浮动元素行为异常（部分浏览器重绘逻辑不同）
真要兼容老项目，优先用 display: flow-root 替代 overflow: hidden 清除浮动，再统一用 position: relative 作定位容器——别让浮动元素自己当定位父级。
