父容器高度塌陷是因浮动元素脱离文档流导致，解决核心是让父容器建立BFC；overflow: hidden最常用但有截断风险，display: flow-root是现代标准解法但IE不支持。
父容器高度塌陷是浮动导致的，不是CSS写错了
子元素用了 float，父容器高度变成0，页面布局错乱——这不是你漏写了 height，也不是浏览器bug，而是浮动元素脱离文档流后，父容器“看不见”它们了。解决的核心不是清浮动，而是让父容器重新建立一个独立的布局上下文。
用 overflow: hidden 最快，但要注意截断风险
给父容器加 overflow: hidden（或 auto、scroll）能触发BFC，强制它包裹浮动子元素。这是最常用也最轻量的做法。
- 适用场景：父容器不需要内容溢出显示（比如卡片、导航栏、简单列表）
- 风险点：
overflow: hidden会裁剪掉超出父容器的内容，比如下拉菜单、tooltip、绝对定位偏移过大的元素 - 兼容性：IE6+ 都支持，但 IE6/7 对
overflow触发BFC的行为不一致，需配合zoom: 1 - 别写成
overflow: visible——它不触发BFC，无效
display: flow-root 是现代标准解法，但IE不支持
display: flow-root 是CSS规范里专为创建BFC设计的值，语义清晰、副作用最小，不会影响溢出行为，也不会触发不必要的滚动条。
- 优点：完全隔离浮动影响，且不干扰溢出、定位、动画等任何其他行为
- 兼容性：Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+；IE全系不支持
- 替代方案：如果要兼容IE，可以用
display: table或display: inline-block，但它们会改变盒模型表现（比如table自带默认间距，inline-block受空白符影响）
为什么不用 clear: both 清浮动？
clear: both 是在浮动元素**之后**加一个新元素来阻断浮动流，属于“打补丁”，不是让父容器自身具备包容能力。
立即学习“前端免费学习笔记（深入）”；
- 常见错误：只给最后一个子元素加
clear: both，但父容器高度依然为0——因为清除的是位置，不是布局上下文 - 真正有效的清浮动写法是伪元素：
::after { content: ""; display: table; clear: both; }，但它本质仍是模拟BFC，不如直接设父容器 - 维护成本高：每个需要包裹浮动的容器都得重复这段伪元素代码
BFC不是万能胶，它解决的是“父容器感知不到浮动子元素”这个具体问题。一旦用了 display: flow-root 或 overflow: hidden，就要同步检查是否有绝对定位元素被裁剪、是否有下拉类交互失效——这些影响往往比高度塌陷更难排查。
