浮动导致的高度塌陷是标准行为而非bug；推荐伪元素clearfix（content: ""+display: table+clear: both），ie6/7需zoom: 1；慎用overflow: hidden，优先flow-root（chrome64+/firefox58+/safari15.4+支持率达98.7%）。
浮动导致的高度塌陷不是浏览器兼容性“bug”，而是所有标准浏览器严格遵循 CSS 规范的行为——浮动元素脱离文档流，父容器自然无法感知其高度。所谓“兼容处理”，本质是选择在目标浏览器范围内稳定生效、副作用可控的清除方案。
优先用伪元素 clearfix（兼顾现代与旧环境）
这是目前最通用、语义干净、无结构污染的解法，适用于 IE8+ 及所有现代浏览器：
- 必须写全三要素：content: "" + display: table + clear: both；漏掉 display 就不生效
- IE6/7 需额外加 zoom: 1 触发 hasLayout，可写成：
.clearfix { *zoom: 1; } - 避免用
display: block，它不触发 BFC，对某些老版 Safari 或安卓 WebView 支持不稳
overflow: hidden 要慎用，尤其在移动端
它通过触发父容器 BFC 来包裹浮动子项，代码简洁，但实际兼容表现差异大：
- Chrome/Firefox/Safari 主流版本均支持，但部分安卓 WebView（尤其 Android 4.x 系统内置）会意外裁剪
position: absolute溢出内容或下拉菜单 - 若父容器本身需横向滚动（如商品卡片流），
overflow: hidden会直接禁用滚动，不可逆 - 替代方案：改用
overflow: auto，在桌面端更稳妥；iOS Safari 中建议配合-webkit-overflow-scrolling: touch
现代项目直接上 display: flow-root
这是 W3C 标准定义的 BFC 创建方式，2026 年已覆盖绝大多数真实用户环境：
- Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+ 均原生支持；全球覆盖率超 98.7%（StatCounter 2026 Q2 数据）
- 一行代码解决，无裁剪、无布局干扰、不继承 line-height，比 overflow 更纯粹
- 兼容兜底：可用 @supports 检测后降级，例如：
@supports not (display: flow-root) { .container { overflow: hidden; } }
空标签法仅用于极老旧系统维护
在必须支持 IE6/7 或某些定制化邮件客户端时才考虑，但需严格控制副作用：
- 标签必须是块级、紧跟最后一个浮动元素之后，且不能设 margin/padding（否则影响布局节奏）
- 为防空白符或字体渲染带来意外高度，推荐样式：
clear: both; height: 0; font-size: 0; line-height: 0; overflow: hidden; - 禁止在 Vue/React 组件中硬编码该标签——它破坏组件封装性，应由父组件通过 class 注入 clearfix
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
