float 会让父容器高度塌陷，因其使元素半脱离文档流而不参与父容器高度计算；正确修复需触发 bfc，如 display: flow-root；现代布局应优先避免 float，仅在图文环绕或 ie8–9 兼容时使用。
float 为什么会让父容器“消失”高度
浮动元素会半脱离文档流，它不占块级空间，但文字仍会绕着它排——这导致父容器计算高度时“看不见”它，直接塌陷为 0。这不是 bug，是 float 的原始设计逻辑：它本就只为图文环绕服务，不是布局工具。
- 典型现象：
div包着两个float: left的子div，父div在开发者工具里显示高度为 0，背景色/边框全不见 - 清除浮动不能只靠
clear: both加在下一个兄弟元素上——那只是“把下一行压下去”，没解决父容器自身塌陷 - 真正安全的修复方式是触发 BFC：
overflow: hidden、display: flow-root（推荐）、或用伪元素::after { content: ""; display: table; clear: both; } -
display: flow-root是现代首选，语义清晰、无副作用；overflow: hidden在需要滚动或阴影时可能意外裁切内容
position: absolute 和 float 都脱离流，但“脱离得是否干净”完全不同
float 元素仍在格式化上下文中“参与影响”：行内内容绕它走，其他浮动元素会和它对齐；而 position: absolute 是真·抽离——它不占位、不推挤、不被绕行，就像页面上多了一层透明玻璃。
- 如果你把一个
float: left的按钮和一个position: absolute的提示框放在同一区域，按钮的文字仍可能绕开按钮本身，但绝对定位的提示框完全无视按钮存在 -
z-index对 float 无效，哪怕你加了z-index: 999，它也压不住同级的position: relative元素——只有定位元素才能进层叠上下文 - absolute 定位参考点是最近的「已定位祖先」（
position不为static），不是父容器本身；而 float 永远只认父容器内边距和相邻浮动元素
什么时候非得用 float，而不是 flex 或 grid
现代布局中，float 已退居极少数场景，不是“能用”，而是“非它不可”——主要就两种情况：老项目兼容 IE8–9，或必须实现原生文字环绕图片效果。
- 图文混排：
img设置float: left后，紧随其后的p文字自动绕排，这是display: inline-block或flex都无法原生复现的行为 - IE8 兼容需求：如果项目仍需支持该浏览器，
flex和grid直接不可用，只能靠float+margin搭建两栏 - 不要用 float 做响应式导航栏：虽然历史上这么干过，但现在
display: flex一行就能居中、换行、对齐，且不会因子项宽度变化导致错行 - 若强行用 float 实现三栏等分布局，遇到子项内容高度不一致时，极易出现“中间栏下沉”——这是 float 的固有缺陷，flex/grid 天然规避
混用 float 和 position 的危险信号
一旦你在同一个父容器里同时用 float 和 position: absolute，布局就进入不可预测状态：绝对定位元素可能突然“卡住”在浮动元素边缘，或者因父容器塌陷而飘到视口左上角。
- 最常见错误：给父容器设
position: relative是为了约束子元素的 absolute 定位，但又在里面放了float子项——此时父容器高度仍可能塌陷，导致 absolute 元素相对位置错乱 - 避免方案：要么全用定位控制（
position: relative+absolute），要么全用流式方案（flex或grid），中间不插 float - 唯一可接受的混用：在
position: relative的容器内，仅用float实现图文环绕（如文章页的插图），其余结构用 flex/grid；此时 float 仅作用于局部文本流，不影响整体定位基准
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
