clear: both 作用于浮动元素自身无效，仅对紧跟其后的块级兄弟元素生效；::after 需同时满足 content: ""、display: block/table、clear: both 才能清除浮动；推荐优先使用 display: flow-root。
clear: both 写在浮动元素自己身上根本没用
很多人给浮动子元素加 clear: both，比如：.item { float: left; clear: both; }。这不会撑开父容器，也不会“清除”任何东西——clear 只对**紧跟在浮动之后的块级兄弟元素**生效，它不作用于浮动元素自身。写在这里等于白配，还可能误导后续布局逻辑。
::after 默认是 inline，clear 完全不触发
::after 伪元素默认是 display: inline，而 clear 属性只对 block、table 或其他参与块格式化上下文（BFC）的元素起效。没设 display，等于写了 clear: both 也等于没写。
- 必须显式设置
display: block或display: table -
display: table更稳妥：不继承line-height，不会意外撑高，IE8+ 全兼容 -
display: block在某些上下文中（如父元素是inline-block或有overflow: hidden）可能被压缩成零高度
content 值为空字符串但不能省略
::after 不渲染的前提是 content 为 none 或完全缺失。哪怕只是空格 content: " " 都能触发渲染，但推荐统一用 content: "" —— 简洁且无副作用。
- 漏掉
content，整个伪元素不存在，clear和display都白设 - 不要用
content: "."或其他可见字符，除非你真需要视觉占位 - 现代项目中，
visibility: hidden和height: 0不再必要；display: table自身就无内容、无高度
比 ::after 更干净的替代方案：display: flow-root
如果目标浏览器支持（Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+），直接给父容器加 display: flow-root 是最简解法。
立即学习“前端免费学习笔记（深入）”；
- 它让容器建立新的 BFC，自动包含所有浮动子项，无需伪元素、
clear或额外类名 - 没有
::after带来的匿名框干扰，也不用担心content或display写错 - 不兼容老浏览器时才回退到
::after方案；别为了“兼容 IE6/7”硬加*zoom: 1，现在基本没意义
content）、得是块级（display）、得真正参与清除（clear: both）。少一个，就等于没写。 
