display: flow-root是现代清除浮动的首选方案，它语义化创建BFC，使父容器正确包含浮动子元素；clear: both加在父元素上无效，因它仅控制自身避开浮动兄弟，无法让父容器感知子浮动高度。
直接用 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::after 必须写全三要素，漏一不可
仅当需要兼容 IE11 或对接无法修改的第三方 HTML（如 CMS 输出）时才用它。标准写法必须同时满足：
-
content: ""—— 不写就等于没生成伪元素 -
display: table—— 比block更稳妥，避免旧版 IE 的 margin 双倍问题，且天然触发 BFC 边界 -
clear: both—— 核心动作，强制伪元素落到所有浮动子项下方
额外注意点：
- Chrome DevTools 默认不显示
::after，要手动勾选 “Show user agent shadow DOM” 才能看到是否渲染成功 - 必须加在「直接包裹浮动子项」的父容器上，嵌套结构需逐层加
- 若父容器已是
display: flex或display: grid，子元素的float属性会失效，此时加.clearfix不仅无效，还可能干扰调试
真正要留意的，是那个被你加了 float: left 却忘了处理父容器的 div——它就在那儿，静静塌陷着。而最容易被忽略的细节，是 content: "" 这个空字符串，它不是装饰，是伪元素存在的前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
