.clearfix::after 必须写对才能修复父元素高度坍塌：content: "" 不可省略，display 推荐 table，且必须加在直接包裹浮动子元素的父容器上。
父元素高度坍塌不是 bug，是 float 的必然行为；用 .clearfix::after 是最可控、副作用最小的修复方式，但必须写对——漏掉 content、写错 display 或加在错误的父级上，都会白忙活。
为什么 .clearfix::after 必须带 content: ""
伪元素不渲染的前提是 content 为空值或缺失。CSS 规范规定：::after 和 ::before 若 content 为 none 或未声明，整个伪元素会被忽略，后续的 clear: both 就没作用对象。
-
content: ""✅ 渲染空内容，可被清除 -
content: none❌ 伪元素不生成，清除失效 -
content完全不写 ❌ 同上，现代浏览器也无视
常见错误是复制代码时删掉了这行，或者预处理器（如旧版 Sass）自动剥离了空字符串。
display: table 和 display: block 哪个更稳
display: table 在 IE8+ 下更可靠，它能自然撑高容器且不触发 margin collapse；display: block 虽然也能工作，但在某些 IE 版本或嵌套浮动场景中，可能因 margin 折叠导致高度计算异常。
-
display: table→ 推荐，兼容性好，语义中性 -
display: block→ 可用，但需额外加height: 0或font-size: 0防止空白行 -
display: inline❌ 不生效，clear只对块级元素起作用
别信“随便写个 display 就行”，clear: both 的清除逻辑依赖于该元素参与块级格式化上下文（BFC）的构建过程。
clearfix 类该加在哪个父元素上
必须加在**直接包裹浮动子元素的那个父容器**上。加错层级等于没加：
- 浮动的是
.item，父级是.list→.list加class="clearfix" - 如果在
.list外再套一层.wrapper，却给.wrapper加 clearfix → 无效，因为.list自身仍塌陷 - Vue/React 中动态插入浮动子项时，要确保 class 在 DOM 更新后已存在，否则首次渲染会闪一下
调试时打开开发者工具，逐层检查“Computed”里的 height，确认 collapse 发生在哪一级，再决定加在哪。
现代项目里要不要还写 clearfix
要看真实环境。如果父容器已设 display: flex 或 display: grid，加 clearfix 完全多余——浮动子项在这些上下文中不会脱离文档流，高度天然正常。
- 支持 Chrome 64+/Firefox 58+/Safari 15.4+？→ 直接用
display: flow-root，一行解决，无 hack、无伪元素 - 还要跑在 IE8 或银行内网老系统？→ 补
*zoom: 1+:after（单冒号），双保险 - 混用 float 和 flex？→ 别这么干，布局逻辑混乱，
clear对 flex 子项无效
真正容易被忽略的是：clearfix 解决的从来不是“浮动本身”，而是“父容器感知不到浮动子项高度”——所以一切操作，都得围绕那个父容器展开，而不是盯着浮动元素改来改去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
