display: flow-root 是解决浮动导致父容器高度塌陷的现代首选方案，它通过创建bfc使父容器正确包含浮动子元素，兼容性良好且无副作用。
父容器高度变成 0px 是浮动的正常行为，不是 bug，也不是写错了样式——只要子元素用了 float: left 或 float: right，它就彻底脱离文档流，父容器在计算 height: auto 时直接忽略它们。
display: flow-root 是现代首选解法
它专为解决这类问题设计，强制父容器创建 BFC（块级格式化上下文），让浮动子元素重新被包含进高度计算，且无副作用：不裁剪内容、不意外触发滚动条、不改变层叠上下文。
-
display: flow-root在 Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+ 已稳定支持，2026 年绝大多数项目可直接用 - 写法极简：
.parent { display: flow-root; }，无需伪元素、无需额外 HTML - 不要和
float同时写在同一个元素上——float会覆盖flow-root的布局行为 - 若父容器本身有
font-size: 0（常见于 inline-block 清理场景），不影响flow-root，这点比伪元素方案更省心
clearfix 伪元素仍需掌握，但细节极易出错
当必须兼容 IE11 或旧版 Safari 时，::after 清除仍是可靠选择，但失效往往不是因为没写，而是关键属性漏了或写错了。
- 必须同时满足三项：
content: ""（否则伪元素不渲染）、display: table（block无法可靠撑高）、clear: both - 错误写法：
display: block—— 它能清除浮动，但不会参与父容器高度计算，父容器依然塌陷 - 嵌套浮动结构中，每一级「直接包裹浮动子项」的父容器都得单独加
.clearfix，外层加了不等于内层自动生效 - Chrome DevTools 默认不显示
::after，要手动勾选 “Show user agent shadow DOM” 才能看到是否渲染成功
overflow: hidden / auto 是兼容性好但风险高的替代方案
它们通过触发 BFC 间接“修复”高度，但本质是副作用利用，并非真正清除浮动。
-
overflow: hidden会裁剪所有超出边界的子元素（如下拉菜单、transform移出的内容、阴影），不是“清除”，是“硬切” -
overflow: auto可能误判溢出：某些position: absolute+top: -10px的元素会被当成溢出，导致滚动条闪现 - 两者都不响应动态插入的浮动内容——JS 新增一个
float: right按钮后，父容器高度不会自动更新 - 如果父容器已设
height或min-height，这些显式值会覆盖 BFC 带来的高度计算，优先检查这些声明
真正容易被忽略的是：浮动本就不是为布局设计的。如果你还在新项目里用 float 做栅格或导航栏，问题不会止于高度塌陷——vertical-align 失效、margin 合并异常、响应式断点错乱都会陆续出现。现在该换 display: flex 或 display: grid 了，它们天然不脱离文档流，父容器高度自动正常，连 clearfix 都不用想。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
