flex/grid 不会塌陷，因其容器默认形成 bfc，能自动包含浮动子项并正确计算高度；而 float 布局需手动触发 bfc 或清除浮动，否则父容器高度为 0。
用 display: flex 或 display: grid 实现响应式两列布局，天然不塌陷；float 方案必须手动触发 BFC 或清除浮动，否则父容器高度为 0 —— 这是塌陷的根源。
为什么 flex/grid 不会塌陷
Flex 和 Grid 容器默认形成 BFC（块格式化上下文），能自动包含浮动子项、计算子项高度。即使子项用了 float 或 position: absolute，只要容器是 flex 或 grid，父容器高度就不会丢失。
常见误判：以为“没写 height 就是塌陷”，其实只是子项未撑开容器——这和塌陷无关；真正的塌陷表现是：父容器背景色/边框消失、后续元素上移覆盖内容。
-
display: flex容器下，哪怕子项全float: left，父容器仍能正确包裹 -
display: grid同理，且对overflow: hidden等 hack 完全免疫 - 但若在 flex/grid 内部又嵌套了
float布局（比如子项自己再 float），塌陷可能转移到子级，需逐层检查
如果非要用 float，怎么防塌陷
必须让父容器触发 BFC，且不能依赖 clear: both 的伪元素——它只解决兄弟元素错位，不解决父容器高度归零。
- 推荐写法：
overflow: hidden或overflow: auto（IE8+ 兼容） - 更现代写法：
display: flow-root（Chrome 64+/Firefox 59+，语义最清晰） - 避免用
zoom: 1（IE专有，已淘汰）或float自身（会把父容器也拖进浮动流） - 别在父容器上写
height: auto——它无效，且可能掩盖问题
示例：
.container {
display: flow-root; /* 一行解决，无副作用 */
}
.left { float: left; width: 200px; }
.right { float: right; width: calc(100% - 200px); }
响应式切换时塌陷风险在哪
媒体查询中改 flex-direction 或 grid-template-columns 本身不引发塌陷，但以下操作会：
- 在断点里把容器从
flex改回block，又没处理子项的float - 用
visibility: hidden隐藏侧边栏，但没同时设flex: 0 0 0，导致剩余空间计算异常 - 给子项加
transform: translateX(-100%)移出视口，却忘了它仍占文档流位置，flex/grid 会继续为其分配空间 - 在 grid 布局中用
grid-column: 1 / -1强制跨列，但内容超长未设min-width: 0，导致容器被撑宽后换行错乱
最容易被忽略的塌陷诱因
不是没清浮，而是子项本身“不可见却占空间”——比如图片没设 height + font-size: 0 导致行高塌缩，或空 <div></div> 被 CSS 设了 margin 却没内容撑开。
调试建议：打开浏览器开发者工具，选中父容器，看 computed 标签页里的 height 是否为 0；再依次禁用子项的 float、position、transform，观察高度是否恢复。真正可靠的防塌陷，是不用 float 做布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
