display: flow-root 是最直接有效的方案，现代项目应优先使用；它专为解决浮动导致的父容器高度塌陷而设计，通过创建 bfc 包裹浮动子元素，无裁剪副作用且兼容主流浏览器。
display: flow-root 是最直接有效的方案，现代项目应优先使用；overflow: hidden 虽兼容性好，但会裁剪溢出内容，不是“修复”而是“遮盖”。
为什么父元素不自动包裹浮动子元素
浮动元素（float: left 或 float: right）会脱离文档流，导致父容器在计算高度时完全忽略它们——这不是 bug，是 CSS 规范行为。父元素高度塌陷、边框缩成一条线、后续元素上移，都是同一根源。
解决的关键不是“清除浮动”，而是让父容器创建一个 BFC（块级格式化上下文），从而强制它把浮动子元素的高度纳入自身布局计算。
display: flow-root 是首选，但要注意作用对象和兼容范围
它专为解决此类问题设计，语义清晰、无副作用：不裁剪 position: absolute 弹层，不干扰 box-shadow 或 transform 位移，也不影响横向滚动。
- 必须写在直接包裹浮动子元素的那个父容器上，写在祖父或子元素上无效
- 父元素若原本是
inline（如<span></span>），需先设display: inline-block或block，否则flow-root不生效 - Chrome 64+ / Firefox 58+ / Safari 15.4+ / Edge 79+ 均已稳定支持；2026 年真实项目中可放心用
- 不要和
overflow: hidden混用——后者多余，反而可能意外裁掉 tooltip 或下拉菜单
示例：
.container { display: flow-root; }
.container > .item { float: left; width: 200px; height: 100px; }
overflow: hidden 为什么有时没效果
它确实能触发 BFC，但前提是前提成立。常见失效不是代码写错，而是以下三点被忽略：
- 父元素的
display是inline或inline-block？得先显式设为block或flow-root - 子元素的
float在 computed 样式里是不是none？可能是被后续规则覆盖了 - 父元素写了
height: 200px或max-height: 300px？固定高度会锁死自动计算，BFC 也救不了
更关键的是：overflow: hidden 不是“让父元素包含浮动”，而是“让父元素变成 BFC 容器”，顺便把溢出内容切掉。所以一旦父容器里有 position: absolute 下拉菜单、横向滚动的标签栏、或带阴影的卡片，就大概率出视觉异常。
真正容易被忽略的点
即使加了 display: flow-root 或 overflow: hidden 让高度“回来”，浮动本身仍在——它只是被 BFC 包裹了。后续若把某个子元素改成 position: absolute，或混用 float 和 flex，塌陷可能悄悄回来；嵌套浮动结构中，每一级「直接包裹浮动子项」的容器都得单独加 display: flow-root，外层加了，内层不会继承。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
