clear: both 不能解决浮动塌陷，因其仅使当前元素避开浮动区域，不改变父容器高度坍缩问题；clearfix 是专治该问题的补救方案，非通用布局解。
clear: both 为什么不能直接解决浮动塌陷
因为 clear: both 只作用于自身，不改变父容器的布局行为。父元素高度仍会坍缩为 0，导致后续内容上移、背景丢失、边框不包裹子元素——这不是“清掉了浮动”，只是让当前元素避开浮动区域而已。
- 常见错误现象：
div包裹几个float: left的子项后，父div在开发者工具里显示高度为0px - 使用场景：需要父容器正确包裹浮动子元素，同时不依赖额外 HTML 标签（如
<div style="clear:both"></div>） - 性能影响：纯 CSS 实现，无 JS 开销，但老式 Clearfix（如
:before + :after伪元素双写）在 IE6/7 下需额外 hack
现代 Clearfix 类该用哪个版本
优先用 Nicolas Gallagher 的 micro clearfix（2012 年后主流方案），它兼容 IE8+，代码短、语义清晰，且避免了 zoom: 1 这类 IE 专有属性带来的潜在副作用。
- 推荐写法：
.clearfix::before, .clearfix::after { content: ""; display: table; } .clearfix::after { clear: both; } - IE6/7 兼容需求？补一句
*zoom: 1;即可，不用整个重写旧版 - 别用
overflow: hidden代替：它会裁剪position: absolute溢出、隐藏box-shadow和transform效果
为什么不能把 Clearfix 当万能“防塌陷”开关
Clearfix 是针对「浮动导致父容器高度失效」这一特定问题的补救，不是布局通用解。现在很多场景下，浮动本身就不该用。
- Flexbox / Grid 布局中强行加
.clearfix：无效，且可能干扰display: flex的默认行为 - 子元素用了
display: inline-block或vertical-align？Clearfix 完全不生效 - 某些 CSS 框架（如 Bootstrap 4+）已弃用浮动栅格，
.clearfix仅保留在工具类中供遗留代码过渡
在样式库中定义时要注意什么
实用工具类（utility class）要克制，避免过度抽象。Clearfix 不是“清浮动”，而是“让父容器包含浮动子元素”——命名和文档必须反映这个精确意图。
立即学习“前端免费学习笔记（深入）”；
- 类名建议用
.contain-floats或保留.clearfix，但注释里写明：/* Forces parent to wrap floated children */ - 不要合并进其他工具类（比如和
.mt-2同一个 class），职责必须单一 - 如果项目已全面使用 Flex/Grid，这个类可以标记为
@deprecated，只留空实现或抛警告
实际项目里最常被忽略的是：Clearfix 解决不了“浮动元素之间间隙”“文字环绕错位”“响应式断点下浮动失效”这些问题——它只管高度坍缩。一旦发现加了 .clearfix 还不对，大概率是布局模型选错了，不是 Clearfix 没写对。
