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 渲染。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 现代浏览器支持良好：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，这个占位可能引发额外垂直间距

BFC 不是浮动的“修复开关”，而是一个渲染上下文的切换点。很多人加了 overflow: hidden 就以为搞定，结果发现下拉菜单不见了、阴影被砍了一半、或者响应式断点里 BFC 突然失效——这些才是线上环境真正卡住人的地方。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！