父容器高度塌陷是float脱离文档流的必然结果；现代项目优先用display: flow-root，老项目或需兼容ie8–10时才用clearfix；clear: both单独写无效，因它只对浮动元素之后的块级兄弟元素生效，且伪元素必须有content: ""和display: table才能触发bfc并撑高父容器。
父容器高度塌陷不是 bug，是 float 脱离文档流后的必然结果；现代项目优先用 display: flow-root，老项目或需兼容 IE8–10 时才用 clearfix。
为什么 clear:both 单独写没用
很多人复制了 clear: both 却发现父容器还是塌陷——因为 clear 只对「块级元素」生效，且必须出现在浮动元素之后、仍在父容器内部。直接给父元素加 clear: both 是无效的（clear 不作用于自身），而写在父容器外的空 <div> 更是白搭。
<ul>
<li>
<code>clear 必须施加在浮动元素「之后」的兄弟元素上，比如 <div class="float-left"></div>
<div style="clear:both"></div>
::after 能模拟这个“之后的兄弟”，但前提是它得是块级（display: table 或 block）且有 content
content: "" 是最常见错误：没有 content，::after 根本不渲染，clear 就像没写
.clearfix::after 的标准写法和兼容要点
真正起效的 clearfix 不是随便拼凑的，关键参数缺一不可。IE6/7 需要额外处理，但现代浏览器只需最小集。
- 必须写
content: ""（空字符串，不能省略或写成none） - 推荐
display: table：比block更稳妥，能触发 BFC，还能避免 IE6/7 的 margin 双倍问题 -
clear: both不能省，它让伪元素强制下移，把父容器底部“拉下来” - IE6/7 兼容需补
.clearfix { zoom: 1; }（触发 hasLayout），但仅限需要支持这些版本的项目
标准片段：
.clearfix::after {
content: "";
display: table;
clear: both;
}
overflow: hidden 为什么有时失效或出问题
它确实能触发 BFC，让父容器重新包裹浮动子项，但副作用太实在，容易被忽略。
- 会裁剪所有溢出内容：下拉菜单、
position: absolute的 tooltip、box-shadow 偏移部分，全被砍掉 - 若父容器本身设了
transform（比如scale(0.95)），可能意外阻止 BFC 生效 - 在 Safari 旧版本中，
overflow: auto可能无故出现滚动条，哪怕内容完全未溢出 - 组件封装时尤其危险：一个用了
overflow: hidden的卡片组件，外部调用时弹层突然消失，排查成本很高
现代项目该用什么替代 clearfix
如果不需要支持 IE11 以下，display: flow-root 是目前最优解——专为解决这类问题设计，语义清晰、零副作用、一行代码。
-
display: flow-root创建新 BFC，天然包含浮动子项，不干扰子元素布局逻辑（不像 flex/grid 会改变默认流） - Chrome 64+、Firefox 58+、Safari 15.4+ 均已稳定支持，2026 年绝大多数生产环境可放心用
- 不要用
display: inline-block或float给父容器“强行撑高”，它们会破坏居中、影响 margin 合并，属于倒退 - 终极建议：新功能直接用 Flex/Grid 布局，彻底绕过 float；维护老代码时，先评估是否真需要浮动——很多场景其实只是习惯性沿用
最容易被忽略的一点：多个浮动层嵌套时，clearfix 或 flow-root 必须加在「每一级直接包裹浮动子项」的父容器上，只加最外层是不够的。
