display: flow-root 是现代解决浮动塌陷的首选方案，它语义化触发bfc且不裁剪内容；clear: both 作用于父元素无效，因clear只影响自身位置；伪元素清除需content、display、clear三者齐全。
直接用 display: flow-root，现代项目里一行就能解决，不用 hack、不裁剪内容、不干扰子元素布局。
为什么 clear: both 加在父元素上完全没用
因为 clear 只控制「自身」避开浮动，不是让父容器去“感知”子项。给 .parent { clear: both; } 写上去，它只会在前面有浮动兄弟时换行，对内部浮动子元素的高度计算毫无影响——父容器还是看不见它们，高度照样是 0。
真正起效的 clear: both 必须出现在浮动子元素之后、且仍在同一父容器内的块级元素上。伪元素 ::after 就是模拟这个位置，但前提是它得渲染出来：
-
content: ""缺失 → 伪元素不生成 → 清除失效 -
display没设成table或block→ 伪元素是行内级 →clear: both对它无效 - 父容器本身设了
overflow: hidden或auto→ 可能干扰伪元素的清除行为
display: flow-root 是什么，为什么它比 overflow: hidden 更安全
display: flow-root 是 W3C 明确定义的 BFC 触发方式，专为解决这类问题而生。它不靠副作用“碰巧”生效，而是语义化地告诉浏览器：“请把这个容器当作一个独立的格式化上下文来处理”。
对比 overflow: hidden：
-
overflow: hidden会裁剪所有溢出内容：下拉菜单、position: absolute弹层、box-shadow、负 margin 装饰、transform 动画中移出边界的区域，全被切掉 -
display: flow-root不改变子元素排布逻辑，float子项照常浮动，其他子项仍按 normal flow 渲染 - 兼容性已足够好：Chrome 64+ / Firefox 58+ / Safari 15.4+ / iOS 15.4+，2026 年绝大多数生产环境可直接使用
哪些情况还必须用 .clearfix 伪元素
只有两类真实场景绕不开 .clearfix：
- 需要兼容 IE11 或更老浏览器（比如政务/银行内网系统）
- 对接无法修改的第三方 HTML 输出（例如 CMS 生成的固定结构，你只能加 class 不能动 DOM）
标准写法必须同时满足三项：
-
content: ""—— 不写就等于没生成伪元素 -
display: table—— 比block更稳妥，避免旧版 IE 的 margin 双倍问题，且天然触发 BFC 边界 -
clear: both—— 核心动作，强制伪元素落到所有浮动子项下方
嵌套浮动结构中，每一级「直接包裹浮动子项」的容器都得单独加 .clearfix；外层加了，内层不会自动继承。
最容易被忽略的底层事实：你可能根本不需要清除浮动
如果父容器已经是 display: flex 或 display: grid，子元素上的 float 属性会被浏览器直接忽略——它自动退化为普通块级元素，不再脱离文档流，高度塌陷问题根本不会出现。
此时加 .clearfix 或 overflow: hidden 不仅无效，还会掩盖真实问题：比如你误以为 float 还在起作用，结果调试半天发现 computed 样式里 float 值已经是 none。
真正卡住的点，往往不是清除没写对，而是没确认子元素是否真的在浮动——打开 DevTools，看 computed 面板里的 float 值是不是 left 或 right。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
