父元素高度塌陷的典型表现是容器视觉上“压扁”、高度为0px或远小于预期，后续兄弟元素上移覆盖内容；根本原因是浮动元素脱离文档流导致父元素无法计算高度。
父元素高度塌陷的典型表现是什么
页面中某个容器突然“压扁”了，里面明明有浮动的子元素，但父元素在开发者工具里显示高度为 0px 或远小于预期；紧随其后的兄弟元素向上蹿，盖住或挤占了本该被包裹的内容。这不是布局错乱，是父级彻底“看不见”子元素了。
根本原因是：浮动元素脱离文档流，父元素计算高度时直接忽略它们。
- 常见触发场景：
float: left/float: right用于图文混排、多栏列表、旧式导航栏 - 现代写法（
flex/grid）基本不出现此问题，但维护老项目或 CMS 模板时高频踩坑 - 注意：
position: absolute也会导致高度丢失，但成因不同，别混淆
用开发者工具快速定位哪个父级丢了高度
打开 Chrome DevTools → 切到 Elements 面板 → 用 Ctrl+Shift+C（Win）或 Cmd+Shift+C（Mac）选中错位区域内的任意子元素 → 往上逐层看父节点的盒子模型（右侧面板的 Computed 或 Styles）。
- 重点盯
height值：如果某个父容器的height明显异常（比如0或auto但视觉上没撑开），它就是目标 - 再看它的
display：如果是block且子元素用了float，基本锁定 - 检查该父元素的
overflow值：若为hidden或auto，可能已“偷偷”触发 BFC，反而没塌陷——这时要怀疑是不是别的父级漏清了
清除浮动的三种可靠写法及选择依据
不是所有方法都适合当前上下文。关键看是否影响布局、是否侵入语义、是否兼容旧浏览器。
立即学习“前端免费学习笔记（深入）”；
-
overflow: hidden（或auto）：最轻量，加在父元素上即可触发 BFC。但副作用明显——内容溢出会被裁剪，且在 iOS Safari 旧版有渲染 bug -
::after伪元素清除（推荐）：.clearfix::after { content: ""; display: table; clear: both; }加在父元素 class 上，无溢出风险，兼容性好（IE8+）。注意必须带content和display: table（不能用block） -
clear: both单独元素：在浮动元素末尾加<div style="clear:both"></div>。有效但污染 HTML 结构，语义不清，仅限临时调试
为什么有时候加了 clear 还没用
常见假象：以为清浮动 = 解决一切错位，结果发现父级高度还是不对，或者错位转移到别处。
- 清浮动对象错了：给子元素自己加
clear，而不是给**包裹它们的父容器**加 - 父容器本身也被浮动了：如果这个父级自身是
float的，它同样脱离文档流，上级容器照样塌陷——得往上再查一级 - CSS 层叠干扰：某处写了
height: 0或min-height: 0覆盖了清除效果，需在 DevTools 中逐条排查 computed 样式 - Flex/Grid 容器内混用
float：现代布局中浮动会被忽略，此时“清浮动”毫无意义，应改用align-items或justify-content
真正卡住的时候，往往不是忘了清，而是没看清哪一层才是“真正失高”的那个父级——它可能隔了两三级 DOM 才露出来。
