父元素高度塌陷不是bug，是float脱离文档流后的必然表现；解决关键是让父容器重新包含子元素，最稳用.clearfix::after（content:"";display:table;clear:both），其次overflow:hidden或现代display:flow-root。
父元素高度塌陷不是 bug，是 float 脱离文档流后的必然表现；解决的关键不是“压住浮动”，而是让父容器重新包含子元素——最稳、最常用的是 .clearfix::after，其次是 overflow: hidden 和 display: flow-root。
怎么用伪元素清除浮动（.clearfix::after）
这是目前兼容性最好、副作用最小的通用解法，IE8+ 都能用，且不干扰溢出内容或布局逻辑。
- 必须加在**浮动子元素的直接父容器**上，不能加在子元素自己身上
-
content: ""不能省，否则伪元素不渲染；display: table（或block）和clear: both缺一不可 - 别写成
.parent::before——::before在内容前插入，起不到“末尾清除”作用 - 示例写法：
.clearfix::after { content: ""; display: table; clear: both; }
overflow: hidden 为什么有时失效或出问题
它靠触发 BFC 让父容器“重新包裹”浮动子元素，但行为是附带的，并非专为清除设计。
- 如果子元素里有
position: absolute或下拉菜单、阴影、横向滚动条等需要溢出的内容，会被裁剪 - 设成
overflow: auto可能意外弹出滚动条（尤其在 Safari 中对空内容敏感） - 父元素本身已有
overflow: visible且被其他样式覆盖时，需检查 CSS 优先级或 !important 冲突 - 它对 margin 折叠也有抑制作用，但若塌陷同时伴随顶部外边距穿透，单靠它可能不够
什么时候该换 display: flow-root
这是 CSS Display Module Level 3 明确为解决塌陷设计的值，语义清晰、无副作用，适合现代项目。
- Chrome 64+ / Firefox 59+ / Safari 15.4+ / Edge 79+ 均支持，2026 年多数生产环境可放心使用
- 不裁剪内容、不改变盒模型、不干扰 flex/grid 布局嵌套，比
overflow: hidden更干净 - 兼容性兜底建议写法：
.container { overflow: hidden; /* 降级 */ } @supports (display: flow-root) { .container { overflow: visible; display: flow-root; } } - 注意：它会让父元素变成一个独立 BFC 容器，若你正依赖 margin 折叠做排版，行为会变化
为什么 Flex/Grid 布局里还出现塌陷
Flex 或 Grid 容器本身不会因浮动塌陷，但常见误操作会让它“看起来塌了”。
- 子元素写了
height: 0、visibility: hidden或内容为空且没设min-height - Flex 容器用了
flex-direction: column，但子项没设flex: 1或高度来源，父容器仍按内容撑高 - 子元素是绝对定位（
position: absolute），它脱离文档流，Flex/Grid 容器也感知不到其尺寸 - 检查 DevTools 的 computed 面板，看父容器的
height是不是真的为0px，还是只是背景/边框没显示出来
真正难处理的不是“选哪个方案”，而是没意识到：你正在调试的，可能根本不是浮动塌陷，而是 margin 折叠、绝对定位遗漏、或者子元素压根没渲染出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
