父容器高度塌陷表现为内容溢出、遮挡下方元素、背景色消失，且computed height为0px；触发bfc（如overflow:hidden、display:flow-root）是最稳妥修复方式。
浮动元素父容器高度塌陷怎么一眼识别
父容器没高度，里面浮动的 div 溢出、盖住下方内容、背景色消失——这是最典型的塌陷现象。不是“看起来错”，而是浏览器渲染时真实计算出的 height: 0。
检查方法很简单：打开 DevTools，选中父容器，在 Styles 面板里看 computed height 是否为 0px；再点 Layout 标签页，观察“Box model”里 content 区域是否压成一条线。
- 只靠
Float: left或float: right的子元素不会撑开父容器 -
position: absolute元素也一样不参与父容器高度计算，但不属于浮动问题，别混查 - 如果父容器用了
display: flex或display: grid，浮动会自动失效，此时看到的“正常”不是修复了，是浮动根本没起作用
clear:both 不是万能解，用错反而更乱
clear: both 确实能阻止后续元素上浮，但它不解决父容器塌陷本身。常见错误是在父容器末尾加一个空 div 并设 clear: both，结果页面多了一个不可见却占 dom 节点的“幽灵盒子”，还可能触发 margin 折叠或影响可访问性。
- 真正要的是让父容器“包含浮动”，不是让下一个元素“躲开浮动”
-
clear: both放在子元素上（比如最后一个浮动项），只能控制它自己下面有没有其他浮动干扰，对父容器高度零影响 - 若父容器同时有
overflow: hidden和clear: both，后者完全冗余，删掉
触发 BFC 是最稳的修复方式
BFC（Block Formatting Context）能让容器重新建立独立布局流，自然包含内部浮动元素。它不是 hack，是 css 规范定义的行为，兼容性覆盖 IE8+。
立即学习“前端免费学习笔记（深入）”；
常用且安全的触发方式（任选其一即可）：
- 给父容器加
overflow: hidden（注意：内容溢出会被裁剪） - 用
overflow: auto，比hidden更友好，滚动条只在必要时出现 -
display: flow-root—— 最干净的解法，专为此设计，IE 不支持，现代项目首选 -
float: left或position: absolute也能触发，但会改变父容器自身定位行为，慎用
示例：
.container { display: flow-root; } .container > .item { float: left; } —— 这样 .container 就稳稳包住所有 .item，无副作用。
Flex/Grid 替代浮动前先确认真实需求
很多人一提浮动就条件反射想“重写成 Flex”。但得先问：你真需要浮动吗？还是只是沿用了老模板？
- 纯图文环绕（文字绕图排版）仍是
float的合法场景，Flex/Grid 做不了这种流式包裹 - 导航栏、卡片网格这类“排列”需求，
display: flex不仅更简洁，还能天然避免塌陷，顺手就把问题根除了 - 如果代码里还混着
float+margin手动对齐，又用clearfix苦苦收尾——大概率该整体换成 Flex，而不是局部修浮动
替换时注意：Flex 容器下子元素的 float 属性会被忽略，别留着不管。
BFC 的触发条件看似简单，但 overflow 值受父级限制、flow-root 在旧环境 fallback 方案漏掉、图文环绕场景误杀浮动——这些才是线上最容易反复冒头的问题。