clear:both必须搭配display:block或table，因为clear仅对块级或表格级框生效；::after默认为行内盒，无content则不渲染，display:inline-block或float会引入新干扰，而display:table更稳妥且兼容性好。
clear: both 为什么必须搭配 display: block（或 table）
因为 clear 属性只对**块级框（block-level box）或表格级框（table-level box）** 生效，::after 默认生成的是行内级匿名盒子，clear: both 在它身上完全被忽略——浏览器压根不计算它的清除行为。
-
display: inline或未声明display：伪元素是行内盒，clear无效，高度仍塌陷 -
display: block：生成块级框，能触发清除逻辑，但可能受父容器overflow: hidden或外边距合并影响而“被截断”或“错位” -
display: table：更稳妥的选择，天然不参与外边距合并，不继承line-height，且在 IE8+ 和所有现代浏览器中行为一致
content: "" 是硬性前提，不是可选装饰
没有 content，::after 就不会被渲染成任何框，后续所有样式（包括 display 和 clear）都无从谈起。这不是“写个空字符串图省事”，而是 CSS 规范强制要求：伪元素必须有可渲染的内容才能生成框树节点。
- IE6–7 要求内容不能完全为空，可用
content: "."或content: " "兼容（现代项目通常不用管） -
content: none或直接不写content：伪元素彻底消失，清除失效 -
visibility: hidden或height: 0可隐藏视觉表现，但不能替代content: ""
为什么不用 display: inline-block 或 float
这两者都会引入新的布局干扰，反而让清除逻辑不可靠：
-
display: inline-block：仍是行内级上下文，clear不生效；还可能因换行或空白符产生意外间隙 -
float: left/right：伪元素自己也浮动了，它就不再“阻挡”其他浮动元素，clear: both失去意义 -
display: flex或grid：不构成块级格式化上下文（BFC），无法撑开父容器高度，清除失败
现代替代方案 flow-root 更干净，但需注意兼容性
如果目标环境支持，直接给父容器设 display: flow-root 是最简解——它一行创建 BFC，天然包含浮动子元素，无需伪元素、content、clear 等任何补丁。
立即学习“前端免费学习笔记（深入）”；
-
flow-root在 Chrome 64+、Firefox 62+、Safari 15.4+、Edge 79+ 可用，IE 完全不支持 - 旧项目升级时，别盲目替换成
flow-root，先确认是否已有依赖clearfix的 JS 行为（比如某些高度计算脚本） -
flow-root不会像display: block那样隐式改变盒模型，也不触发 hasLayout，副作用更少
真正容易被忽略的点是：很多人复制了 clearfix 样式却删掉了 content: ""，或者把 display: table 换成 display: block 后发现在 Safari 旧版或某些嵌套 overflow 场景下突然失效——问题不在 clear 本身，而在那个看似“无关紧要”的显示类型声明。
