clear: both 不是清除浮动的最佳选择，因其仅解决兄弟元素遮挡而无法防止父容器塌陷，且引入冗余DOM；overflow方案有裁剪或滚动条副作用；现代推荐伪元素clearfix法，干净无副作用；长远应放弃浮动，改用flex或grid布局。
为什么 clear: both 不是清除浮动的最佳选择
它只能解决兄弟元素的“被遮挡”问题，对父容器高度塌陷完全无效。常见错误是给浮动元素后面加一个 <div style="clear: both"></div>，这确实能撑开父容器，但引入了无意义的 DOM 节点，语义混乱，维护成本高。
更关键的是，clear 本身不参与父容器的 BFC（块级格式化上下文）构建，无法从根本上隔离浮动影响。
用 overflow: hidden 或 overflow: auto 的实际限制
这两个值能触发父容器生成 BFC，从而包含内部浮动子元素，避免高度塌陷。但它们有真实副作用：
-
overflow: hidden会裁剪溢出内容（比如下拉菜单、tooltip、绝对定位元素超出父边界时） -
overflow: auto在不需要滚动时也可能出现滚动条（尤其在 Safari 或某些缩放比例下） - 都不适用于需要真实溢出可见的场景（如动画位移、过渡效果）
所以这不是“通用解”，而是“权宜之计”，仅适合内容确定、无交互溢出风险的简单模块。
立即学习“前端免费学习笔记（深入）”；
现代推荐：伪元素 ::after 清除法（clearfix）
这是目前最干净、兼容性好（IE8+）、无副作用的方案。核心是利用伪元素插入一个清除节点，不污染 HTML 结构，也不影响溢出行为。
标准写法如下：
.clearfix::after {
content: "";
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* IE6/7 hack */
}使用时只需给浮动父容器添加 class="clearfix"。注意两点：
-
display: table比display: block更稳妥——后者在某些旧版浏览器中可能不触发清除行为 -
*zoom: 1是为 IE6/7 触发 hasLayout，若项目已放弃支持可省略 - 不要用
display: flex或display: grid替代——它们虽能自然包含浮动，但会彻底改变布局模型，属于“换方案”而非“清浮动”
真正一劳永逸的替代思路：放弃浮动布局
浮动本就不是为页面布局设计的（它是为文字环绕图片服务的）。2024 年还在靠 float 做整体布局，等于主动给自己埋坑。
优先考虑：
- 用
display: flex替代行内块+浮动的导航栏、卡片列表 - 用
display: grid替代多列浮动的主内容区（如文章+侧边栏） - 复杂响应式布局直接上
@container+grid-template-areas（需检查容器查询支持）
如果必须兼容 IE11，flex 的 fallback 成本远低于维护一套脆弱的浮动清除逻辑。真正的“最佳实践”，往往是不用它。
