浮动塌陷时父容器高度为0，因浮动元素脱离文档流；首选display: flow-root创建BFC解决，避免overflow:hidden或clear:both旧方案；Flex/Grid布局需检查方向、对齐及轨道定义。
父容器高度为0？浮动元素没撑开父级
这是浮动塌陷最典型的症状：div 看得见，但高度是 0px，里面所有 float: left 的子元素都“飘”在父容器外面。浏览器渲染时，浮动元素脱离文档流，父容器压根“感觉不到”它们存在。
解决思路不是强行设高，而是让父容器重新“感知”浮动子元素的布局边界。现代方案首选 display: flow-root，它创建一个块级格式化上下文（BFC），天然包含浮动子项。
-
display: flow-root兼容性好（Chrome 58+、Firefox 57+、Safari 10.1+），无副作用，不改变盒模型行为 - 别用
overflow: hidden强凑——它会意外裁剪position: absolute子元素或box-shadow - 避免
clear: both伪元素老方案（如::after { content: ""; display: table; clear: both; }），冗余且易漏写content
flex布局下父容器不自适应？检查flex-direction和align-items
用 display: flex 后父容器反而“缩成一条线”，大概率是子元素默认 align-items: stretch 被干扰，或主轴方向没对齐内容流。
Flex 容器本身高度由内容决定，但若子元素设了 height: 100% 或 flex-shrink: 0 却没给明确尺寸，就会导致父容器无法自然伸展。
立即学习“前端免费学习笔记（深入）”；
- 确保父容器没写死
height或max-height，否则会截断内容 - 子元素若需填满高度，优先用
flex: 1而非height: 100%——后者依赖父级有显式高度，形成循环依赖 - 横向布局（
flex-direction: row）时，父容器高度由最高子项决定；纵向布局（flex-direction: column）时，高度由所有子项累加决定
Grid布局中父容器塌陷？确认grid-template-rows是否隐式设为auto
写 display: grid 后父容器高度消失，常见于只写了 grid-template-columns 却没配 grid-template-rows。此时浏览器按默认规则处理行轨道：所有行高为 auto，而空行或无内容行就真的“没高度”。
Grid 的自适应本质是轨道（track）驱动，不是内容驱动。没有定义行轨道，就没有高度锚点。
- 若子元素需撑开父容器，至少写
grid-template-rows: 1fr或grid-template-rows: auto，避免完全留空 -
grid-auto-rows: min-content可让新增行自动适配内容，但对已有子项无效，需配合grid-row显式分配 - 慎用
height: 100vh在 Grid 父容器上——它会覆盖自然高度计算，导致响应式失效
为什么清除浮动后还是没效果？检查父容器是否被transform/position影响
加了 display: flow-root 或 ::after 清除浮动，但父容器依然不撑开，往往是因为它本身处于某种“独立渲染上下文”中：比如被 transform、position: absolute/fixed 或 contain: layout 干扰了高度传播链。
这些属性会让元素脱离常规文档流布局计算，其高度不再向上反馈给祖先。
- 用浏览器开发者工具检查父容器 computed 样式，重点关注
transform、position、contain三个属性是否非默认值 - 临时移除
transform: translateZ(0)这类“强制硬件加速”的 hack，它是塌陷常见元凶 - 如果必须用
position: absolute，那就别指望它撑开父级——换用position: relative或改用 Flex/Grid 布局
真正卡住的地方，往往是父容器的父容器出了问题。别只盯着“塌陷那层”，往上查两层样式更靠谱。
