display: flow-root 是解决父容器高度塌陷最稳妥的方式，它专为触发 BFC 设计，语义清晰、无副作用，现代浏览器支持良好（Chrome 64+、Firefox 58+、Safari 15.4+），且不干扰 flex/grid 布局或伪元素清除法。
为什么父容器高度会塌陷
浮动元素脱离文档流，父容器在计算自身高度时直接“看不见”它们——这不是 bug，是 CSS 规范定义的行为。float: left 或 float: right 后，子元素不再参与父容器的盒模型高度计算，导致 height 为 0px，后续兄弟元素上移、背景/边框消失、布局错乱。
display: flow-root 是最稳妥的触发方式
它专为解决这类问题设计，语义清晰、无副作用：父容器仍是块级元素，不改变定位、不裁剪溢出、不影响 position: absolute 子元素或 box-shadow 渲染。
- 现代浏览器支持良好：
Chrome 64+、Firefox 58+、Safari 15.4+ - 写法简单：
display: flow-root直接加在父容器上即可 - 不干扰 flex/grid 布局逻辑，也不影响伪元素清除法共存
overflow: hidden 要小心溢出内容被截断
虽然兼容性好（IE8+ 都支持），但它是“副作用触发”：只要内容超出父容器边界（比如下拉菜单、tooltip、transform 偏移后的元素、长阴影），就会被硬裁剪。
-
overflow: auto会多出滚动条，视觉干扰大 -
overflow: scroll强制显示滚动条，更不推荐 - 用前务必检查父容器内是否有
position: absolute、box-shadow或动态展开区域
伪元素清除法（clearfix）仍需谨慎使用
适用于需要兼容 IE11 或老版 Android 的项目，但不是“清除浮动”，而是通过插入一个参与文档流的块级占位来撑高父容器。
立即学习“前端免费学习笔记（深入）”；
- 经典写法：
::after { content: ""; display: table; clear: both; } - 不能和
display: flex或display: grid父容器共用——伪元素会被忽略 - 若父容器有
padding或border，这个占位可能引发额外垂直间距
overflow: hidden 就以为搞定，结果发现下拉菜单不见了、阴影被砍了一半、或者响应式断点里 BFC 突然失效——这些才是线上环境真正卡住人的地方。 
