display: flow-root 是解决浮动导致父容器高度塌陷最干净的现代方案，它创建BFC使父容器正确包裹浮动子元素，无副作用且兼容主流浏览器。
浮动元素让父容器高度塌陷，页面会闪一下
这是 CSS 浮动最经典的表现：子元素用了 float: left 或 float: right，父容器高度变成 0，后续内容往上“挤”，渲染完成前出现明显闪烁或跳动。根本原因不是浏览器 bug，而是浮动元素脱离文档流后，父容器无法感知其尺寸。
常见场景包括导航栏、图文混排卡片、老式栅格布局——尤其在 DOM 动态插入或 Vue/React 组件首次挂载时更明显，因为重排（reflow）发生在样式计算之后。
- 别用
height或min-height硬撑，这会破坏响应性，且无法适配内容变化 - 避免只靠
overflow: hidden，它虽能触发 BFC，但可能意外裁剪阴影、下拉菜单等溢出内容 - 优先用
display: flow-root，它是专为此设计的现代解法，无副作用，兼容 Chrome 64+/Firefox 58+/Safari 15.4+
display: flow-root 是目前最干净的修复方式
flow-root 创建一个独立的块级格式化上下文（BFC），让父容器能正确包裹内部浮动元素，同时不干扰溢出行为、不强制隐藏内容、不影响 margin 合并逻辑。
对比其他方案：clear: both 要额外加空标签或伪元素；overflow: auto 可能在 iOS 上触发非预期滚动条；而 flow-root 是语义明确、零副作用的原生方案。
- 直接写在浮动元素的父容器上：
div.container { display: flow-root; } - 它不会改变子元素的布局模式，浮动仍生效，只是父容器“看得见”它们了
- 若需兼容 IE 或极老安卓 WebView，才考虑回退到
::after清除浮动（但绝大多数项目已无需）
伪元素清除浮动仍可用，但要注意细节
当必须支持 flow-root 不可用的环境时，::after 伪元素仍是可靠选择，但很多人漏掉关键声明导致失效。
典型错误是只写了 content: "" 和 clear: both，却忘了设 display: table 或 block，导致伪元素不占空间，清除无效。
- 完整写法必须包含三要素：
display: table（推荐）或display: block、clear: both、content: "" - 用
table而非block更稳妥，因某些旧版 Safari 对block+clear的处理有边界问题 - 不要给伪元素设
height: 0或visibility: hidden，这会影响清除效果；用font-size: 0或line-height: 0控制空白更安全
Flex/Grid 布局下浮动基本不该出现
如果父容器已经是 display: flex 或 display: grid，再对子元素用 float 属于误用。浮动在 Flex/Grid 容器中会被忽略（规范明确要求），不仅无效，还可能干扰对齐逻辑，甚至在某些浏览器中引发渲染异常。
真实需求通常是“让子项并排”或“文字环绕图片”，这些完全有更现代、更可控的方式：
- 并排布局 → 直接用
flex-direction: row或grid-template-columns - 文字环绕图片 → 用
shape-outside配合float仅限图文场景，且需确保图片是块级并设置了宽高 - 任何试图在 Flex 容器里用
float“微调位置”的做法，几乎都该重构为margin、justify-content或place-self
真正难处理的其实是嵌套场景：比如第三方组件内部用了浮动，你只能控制外层容器。这时候 flow-root 就成了最省心的选择——不用碰别人代码，加一行就稳住高度。但得记住，它只解决“高度塌陷”，不解决浮动本身带来的文档流脱离问题。如果后续要精确控制浮动元素与其他非浮动元素的垂直对齐，那得另想办法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
