父元素高度塌陷是因浮动子元素脱离文档流导致父容器无法感知其存在clearfix通过伪元素清除浮动最稳妥overflow:hidden有裁剪风险现代布局应优先使用Flexbox或Grid。父元素高度塌陷是因为子元素浮动了浮动元素会脱离文档流父容器无法感知它的存在所以高度直接变成零。这不是 bug是 CSS 浮动机制的自然结果——父元素“看不见”浮动子元素也就不会撑开自己。常见错误现象div 看起来空了、背景色没显示、后续元素往上跑、边框包不住内容典型使用场景用 float: left 做多栏布局或老式导航菜单别指望 height: auto 或 min-height 能救回来——它们依赖内容撑高而浮动内容不算“有效内容”clearfix 是最稳妥的通用解法给父元素加一个 clearfix 类本质是用伪元素在末尾插入一个清除浮动的“占位”让父容器重新计算高度。它兼容 IE8不依赖 JS也不改变布局逻辑。必须写对两个关键声明::after 伪元素 clear: both别漏掉 content: 否则伪元素不渲染清除失效别用 display: block 替代 display: table后者在 IE7 下更稳示例代码.clearfix::after { content: ; display: table; clear: both;}overflow: hidden 有隐藏风险给父元素设 overflow: hidden 确实能触发 BFC强制包含浮动子元素但它不是“清除”而是“裁剪”。一旦子元素有负 margin、下拉菜单、tooltip 或动画移出边界就会被切掉。适合场景父容器本就该严格限制溢出比如卡片、固定宽高的模块不适用场景需要 dropdown、hover 展开、绝对定位子元素超出父边界的布局IE6/7 下 overflow: hidden 可能引发 hasLayout 问题表现不稳定比 clearfix 少一层语义纯属副作用利用后期维护容易误删现代布局应绕过 float 清除问题浮动本就不是为布局设计的只是早期妥协方案。现在 Flexbox 和 Grid 已成主流它们天然不脱离文档流父容器高度自动正常。 RedClaw 百度推出的手机端万能AI Agent助手