display: flow-root 是解决浮动导致父容器高度塌陷的首选方案，一行代码即可触发bfc、语义明确、无副作用，兼容chrome 64+/firefox 58+/safari 15.4+；clearfix需content: ""、display: table、clear: both三要素齐全才有效。
display: flow-root 是首选，一行代码生效
现代项目里直接给父容器加 display: flow-root 就能解决，它专为触发 BFC（块级格式化上下文）而设计，语义明确、无副作用。父容器立刻重新包含所有浮动子项，背景、边框、内边距全恢复正常。
常见错误是把它和 display: block 混为一谈——display: flow-root 不改变子元素排布逻辑，也不裁剪 position: absolute 弹层、box-shadow 或下拉菜单等溢出内容。
浏览器支持已很扎实：Chrome 64+ / Firefox 58+ / Safari 15.4+（即 iOS 15.4+）均原生支持，2026 年可视为事实标准。
伪元素 clearfix 还得会，但三要素缺一不可
当需要兼容 IE11 或对接无法修改的 CMS 输出 HTML 时，.clearfix::after 仍是必要手段。但它必须同时满足三个条件才会生效：
-
content: ""：不写就等于没生成伪元素，DevTools 默认也不显示 -
display: table：比display: block更稳妥，避免旧版 IE margin 双倍问题，且天然触发 BFC 边界 -
clear: both：强制该伪元素下移到所有浮动元素下方，从而撑开父高
漏掉任意一项，尤其 content: ""，在部分 UC 或 QQ 浏览器内核中会完全失效。
overflow: hidden 能用但有隐藏风险
overflow: hidden 确实能触发 BFC 解决塌陷，兼容性极好（IE6+），但副作用实在：
- 所有超出容器的内容都会被裁剪：下拉菜单、Tooltip、
position: absolute弹窗、长阴影或圆角溢出都可能消失 - 如果父容器本身已有
overflow: hidden用于遮罩动画，再靠它“顺便”清浮动，样式逻辑就混了 -
overflow: visible不触发 BFC，写了等于没写；overflow: scroll会强制显示滚动条，干扰视觉
别给 flex 或 grid 父容器加任何清除方案
如果父容器已经是 display: flex 或 display: grid，子元素的 float 属性会自动失效——它退化成普通块级元素，不再脱离文档流，高度塌陷问题根本不会出现。
此时再加 display: flow-root、.clearfix 或 overflow: hidden，不仅无效，还会让样式表变臃肿，干扰调试。
真正容易被忽略的是：那个被你加了 float: left 却忘了处理父容器的 div，它就在那儿，静静塌陷着；而更隐蔽的问题，往往藏在 margin-collapse、min-height 冲突或 vertical-align 基线错位里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
