display: flow-root 是解决浮动塌陷的最优解，一行代码即可触发 bfc，兼容现代浏览器且无副作用；clear: both 对父元素无效，仅作用于自身；伪元素 clearfix 需 content: ""、display: table、clear: both 缺一不可。
直接用 display: flow-root，一行解决，无副作用，现代浏览器全支持。别再靠 clear: both 硬扛，它根本不能加在父元素上生效。
为什么 clear: both 加在父容器上完全没用
clear 的作用对象是「自身」，不是子元素。给父元素写 .parent { clear: both; }，它只会尝试避开前面的浮动兄弟元素，对内部浮动子项毫无影响——父容器依然看不见子项，高度还是 0。
真正起效的 clear 必须出现在浮动元素之后、且仍在同一父容器内的块级兄弟元素上，比如：<div class="float-left"></div>
<div style="clear:both"></div>。但这种写法污染 HTML，不推荐。
- 伪元素
::after能模拟这个“之后的兄弟”，但前提是它必须渲染出来：漏掉content: ""是最常见错误 -
display必须设为table或block，否则伪元素是行内级，clear: both对它无效 - 如果父容器自己设置了
overflow: hidden或auto，会干扰伪元素的清除行为，导致失效
display: flow-root 是目前最优解
它是 W3C 明确定义的 BFC 触发方式，专为解决这类问题而生，语义清晰、零副作用。
只需一行：.container { display: flow-root; }，父容器立刻重新包含所有浮动子项，背景、边框、后续元素全部恢复正常。
- 不裁剪任何溢出内容（
position: absolute弹层、box-shadow、下拉菜单全保留） - 不改变子元素排布逻辑（不像
flex或grid那样强制重置子项样式） - Chrome 64+ / Firefox 58+ / Safari 15.4+ 均已原生支持，2026 年已可放心使用
哪些情况还得用 clearfix？
仅限两类场景：需要兼容 IE11 及更老浏览器；或对接无法修改的第三方 HTML（比如 CMS 输出的固定结构）。
标准写法必须包含三项：content: ""、display: table、clear: both。缺一不可。
-
display: table比block更稳妥，能避免旧版 IE 的 margin 双倍问题，且天然触发 BFC 边界 - IE6/7 需额外补
*zoom: 1（仅当真要支持时才加） - 嵌套浮动结构需逐层加
.clearfix：外层容器和每个含浮动子项的内层容器都得单独加
别忘了真正的问题源头：还在用 float 做布局吗？
如果父容器已是 display: flex 或 display: grid，子元素的 float 属性会直接失效——它自动退化为普通块级元素，不再脱离文档流，高度塌陷问题根本不会出现。
此时加 .clearfix 不仅无效，还会干扰调试；强行混用 float 和 justify-content，渲染结果不可预期。
文字环绕图片等少数场景可用 shape-outside 替代，其余一维/二维排列请直接换 flex 或 grid——这不是“升级”，是让 CSS 回归它该有的样子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
