clearfix 更优：不污染HTML、真正解决父容器塌陷、可复用且兼容现代布局；clear: both 需额外标签、仅局部生效、依赖位置巧合。
clear: both 和 clearfix 本质目标一致：解决浮动导致的父容器高度塌陷问题。但实现逻辑、使用位置和影响范围完全不同。
clear: both 是“同级清除”，作用在兄弟元素上
它必须写在浮动元素之后、与之同级的另一个元素上，强制该元素不与任何浮动元素并排，从而把后续内容“拉回正常流”。
- 需要真实 HTML 标签（比如 <div style="clear:both"></div>），会增加无语义结构
- 只影响自身及之后的布局，不修复父容器高度塌陷——除非这个 clear 元素恰好在父容器内部最末端且能撑高父盒
- 适合局部控制，比如两栏浮动后加一个分隔线或标题，不让它被浮动内容遮挡
clearfix 是“父级包裹清除”，作用在浮动元素的父容器上
它不依赖新增标签，而是用伪元素（::after）在父容器末尾“虚拟插入”一个 clear:both 的块，让父容器重新计算高度并包裹住所有浮动子项。
- 核心是 content: "" + display: block + clear: both，配合 visibility: hidden 或 height: 0 隐藏视觉干扰
- 现代写法常用 display: table 替代 block，更稳妥兼容 BFC 触发逻辑
- IE6/7 需要 zoom: 1 激活 hasLayout，现在基本可省略
为什么推荐 clearfix 而非直接用 clear: both？
- 不污染 HTML 结构，保持语义清晰
- 一次定义、全局复用（加 class 即可），维护成本低
- 真正解决父容器塌陷问题，而不是靠“碰巧放对位置”来补救
- 与 flex/grid 布局不冲突，可平滑过渡到现代方案
其他清除方式的定位差异
- overflow: hidden：靠触发 BFC 实现包裹，但可能意外裁剪溢出内容（如阴影、下拉菜单）
- display: flow-root：现代标准解法，语义明确、无副作用，兼容性已覆盖主流浏览器（Chrome 64+/Firefox 59+/Safari 15.4+）
- flex/grid 容器：浮动在 flex 或 grid 父容器中自动失效，无需清除——这是最彻底的规避策略
