现代项目中绝大多数情况不该用.clearfix；仅在维护老ie、第三方组件强制float、文本环绕图片三类场景需使用，推荐display:table+clear:both写法。
现代项目里该不该用 .clearfix？
绝大多数情况——不该。如果你在写新项目，且目标浏览器支持 Flexbox（IE11 除外）或 Grid，display: flex 或 display: grid 天然包含浮动子元素，根本不会塌陷，也无需 clear 或 ::after。强行套 .clearfix 反而可能干扰布局逻辑，比如让一个 flex 容器多出一个伪元素，破坏对齐。
必须用 .clearfix 的真实场景
只出现在三类地方：
– 维护老 IE（尤其是 IE11）兼容的遗留系统
– 第三方组件库强制要求 float 布局（如某些旧版 UI 框架的栅格）
– 文本环绕图片等语义明确、非容器级的浮动，且不能改结构
此时推荐用这个写法：
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
原因很实际：
– display: table 在 IE8+ 都能触发 BFC，比 block 更稳妥
– ::before 防止顶部外边距折叠（尤其当父元素有 margin-top 时）
– content: "" 必须是空字符串，写成 " "（带空格）会在 IE 下插入空白节点，导致换行和高度异常
overflow: hidden 能不能替代 .clearfix？
能，但风险高：
– overflow: hidden 会裁剪所有溢出内容（比如下拉菜单、阴影、绝对定位元素超出部分）
– overflow: auto 在 Safari 14– 会意外添加滚动条（即使没溢出）
– overflow: scroll 强制显示滚动条，UI 不一致
– 它不解决后续兄弟元素被浮动“顶上来”的问题，只解决父容器塌陷
所以除非你确认容器内绝无溢出，且不需要支持 Safari 14，否则别用它当 clearfix 替代方案。
响应式断点里要不要动态加 .clearfix？
不要。CSS 媒体查询无法动态切换伪元素行为；.clearfix 是一次性修复父容器高度计算的机制，不是按视口条件启用/禁用的开关。如果某断点下浮动逻辑变了（比如小屏取消 float 改为块级堆叠），那应该直接移除 float，而不是加/删 .clearfix。
真正要响应的是浮动本身：
– 大屏：两个子元素 float: left
– 小屏：媒体查询里设 float: none + width: 100%
– 这样父容器自然恢复文档流，高度自动撑开，.clearfix 根本不需要
最容易被忽略的一点：很多团队把 .clearfix 当成“万能补丁”全局挂载，结果在 Flex/Grid 容器上也加，反而引发不可见的渲染冲突。它不是样式修饰，而是针对特定脱离文档流场景的急救措施——用之前，先确认那个父容器真的只剩浮动子元素，且没有更现代的替代方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
