display: flow-root 是解决浮动导致父容器高度塌陷最直接、副作用最小的方式，它通过显式创建bfc使父容器重新纳入浮动子元素布局边界，且不裁剪溢出、不干扰定位与盒模型。
display: flow-root 是解决浮动导致父容器高度塌陷最直接、副作用最小的方式，现代项目里加一行就能生效，不用 hack、不裁剪内容、不干扰子元素定位。
为什么 display: flow-root 能直接解决问题
浮动元素脱离文档流，父容器默认不计算其高度——本质是父容器没形成 BFC（块级格式化上下文）。display: flow-root 的作用就是显式创建一个独立的 BFC 容器，让父容器重新纳入浮动子元素的布局边界。
它和 overflow: hidden 触发 BFC 的原理一致，但只做这一件事：包裹浮动，不附带任何渲染副作用。
- 不裁剪
position: absolute弹层、box-shadow、下拉菜单或transform溢出部分 - 不改变子元素原有排布逻辑（
float仍生效，其他子项照常走 normal flow） - 不会意外触发 margin 合并抑制以外的盒模型变化（比如不影响
min-height计算）
哪些情况 display: flow-root 会失效
它不是万能开关，加了就一定生效的前提是父容器当前状态允许该声明起效：
- 父容器已设
display: flex、display: grid或display: inline-block—— 这些值与flow-root互斥，CSS 解析时只认最后一个声明，flow-root被忽略 - 父容器是
inline元素（如<span></span>），未先设display: block或display: inline-block——flow-root对 inline 元素无效 - 项目需兼容 IE11 或更老浏览器 ——
flow-root完全不支持，必须用@supports包裹或 fallback 到伪元素方案 - 父容器同时用了
contain: layout或contain: paint—— 可能抑制 BFC 行为，导致高度仍塌陷
如何安全地在项目中落地
不必等全浏览器支持再动手，2026 年主流环境（Chrome 64+ / Firefox 58+ / Safari 15.4+ / iOS 15.4+）已可放心使用。推荐写法：
.container {
display: flow-root;
}
@supports not (display: flow-root) {
.container {
overflow: hidden;
}
}
注意点：
- 必须作用在「直接包裹浮动子元素」的那个父容器上；写在祖父层或子元素上都无效
- 如果父容器已有
height或min-height声明，会覆盖flow-root自动计算的高度，应设为auto或移除 - 动态插入浮动节点后无需 JS 干预，浏览器自动重排，比
clearfix更适合异步场景
别再误用 clear: both
clear: both 作用对象是「自身」，不是子元素。给父容器写 .parent { clear: both; } 完全无效——它只会让父容器避开前面的浮动兄弟元素，对内部浮动子项毫无影响。
真正起效的 clear: both 必须出现在浮动子元素之后、且仍在同一父容器内的块级元素上。伪元素 ::after 就是模拟这个位置，但前提是它得渲染出来：content: "" 缺失 → 伪元素不生成 → 清除失效；display 没设成 table 或 block → 伪元素是行内级 → clear: both 对它无效。
所以，除非真要兼容 IE11 或对接无法修改的 CMS 输出 HTML，否则没必要手写 clearfix —— 写漏一个属性，DevTools 里都看不到伪元素，排查成本远高于一行 flow-root。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
