父元素高度塌陷主因是子元素脱离文档流或父元素BFC未触发；推荐用display: flow-root解决，兼容现代浏览器，避免overflow: hidden副作用。
父元素高度塌陷：常见原因不是 height: auto
父元素没高度，往往不是因为设了 height: auto（它本来就是默认值），而是因为子元素脱离了文档流，或者父元素本身被设置了 height: 0、overflow: hidden、float 未清除等。检查顺序建议如下：
- 确认父元素没有
height、max-height或min-height的硬性限制 - 检查子元素是否用了
position: absolute或fixed—— 它们不参与高度计算 - 看是否有浮动子元素但父元素没触发 BFC（比如没加
overflow: hidden或display: flow-root） - 用浏览器开发者工具的「Layout」面板，观察父元素的
content box高度是否为 0
box-sizing: border-box 会影响撑开行为吗？
不会直接影响“是否撑开”，但会改变“撑开多少”。box-sizing: border-box 让 padding 和 border 包含在 width/height 内，而 content-box（默认）则额外增加。关键点在于：
- 父元素设了
height: 200px+box-sizing: border-box，再加padding: 20px，内容区只剩 160px 高 —— 子元素可能溢出或被截断 - 若父元素是
height: auto，box-sizing不影响其自适应高度，但会影响子元素的可用空间和视觉对齐 - 排查时重点看父元素的 computed
height和content box height是否一致，不一致就说明padding/border在“吃掉”空间
快速验证与修复：用 display: flow-root 最省事
如果父元素只是需要包含浮动/inline 子元素并自动撑高，display: flow-root 是最干净的解法 —— 它创建新的 BFC，且不带 overflow: hidden 的副作用（比如裁剪 position: absolute 子元素）。
/* 推荐写法，替代老式 clearfix */
.parent {
display: flow-root;
}
<p>/<em> 错误示范：仅靠 height: auto 解决不了浮动塌陷 </em>/
.parent {
height: auto; /<em> 没用，除非子元素没脱离流 </em>/
}- Chrome 58+、Firefox 53+、Safari 10.1+ 均支持
flow-root，IE 不支持（需 fallback） - 若需兼容 IE，改用
overflow: hidden或伪元素 clearfix，但要注意overflow可能隐藏阴影、下拉菜单等溢出内容 - 不要给父元素同时设
height: auto和min-height却忽略子元素 margin 折叠 —— 相邻垂直 margin 会合并，导致实际高度比预期小
子元素用 flex/grid 时父元素不撑开？检查 flex-direction 和 align-items
当父元素是 display: flex 或 grid，它默认不会因子元素内容“自然撑高”，而是按主轴/交叉轴规则布局。常见陷阱：
立即学习“前端免费学习笔记（深入）”；
-
flex-direction: column下，子元素高度仍受align-items和align-content影响；若设了align-items: stretch（默认），子元素会拉伸，但父元素自身高度仍由内容决定 -
align-items: flex-start可能让子元素“贴顶”，但若子元素没设高度，父元素仍可能塌陷 - Flex 容器若设了
height: 0或min-height: 0，会压制子元素的自然高度扩张 - 用
flex: 1的子元素，只有在父容器有明确高度（如height: 100vh）时才生效，否则无效
复杂点往往藏在嵌套的 flex 容器里 —— 外层设了 height: 100%，但祖先没给高度，整条链就断了。这时候查 computed height 从 body 往上推，比猜更可靠。
