伪元素法清除浮动需同时设置.content: “”和display: table，::before防外边距合并，::after加clear: both；overflow: hidden靠触发BFC“清浮”但会裁剪溢出内容；clear: both加在浮动元素自身无效，因目标是撑开父容器而非控制元素定位。
伪元素法（.clearfix::after）怎么写才真正生效
最常复制粘贴却失效的写法，是漏了 content: "" 或用了 display: block 却没处理旧浏览器行高塌陷。现代稳妥写法应为：
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
/* 兼容 IE6/7（仅当真需支持时加） */
.clearfix {
*zoom: 1;
}
关键点：
-
content: ""必须存在，否则伪元素根本不渲染 - 用
display: table比block更稳——它既触发 BFC，又避免某些 IE8 下因margin-collapse导致清除失效 -
::before不是可有可无：它防止父容器顶部外边距与第一个子元素合并，造成视觉错位 - 如果父元素本身设了
overflow: hidden，::after可能被裁剪，导致清除失败
overflow: hidden 为什么有时“清了但不对劲”
它不是在“清除浮动”，而是靠触发 BFC（块级格式化上下文）让父容器重新包含浮动子元素。表面有效，但副作用明显：
- 会裁剪所有溢出内容：比如
position: absolute的下拉菜单、box-shadow、transform位移后的部分，全被截掉 - 在响应式中可能意外出现横向滚动条（尤其配合
width: 100vw时） - 和
resize、scroll-behavior等属性存在隐性冲突
适用场景很窄：仅当确认父容器内绝无任何溢出需求，比如纯图标导航栏、固定尺寸卡片组。
立即学习“前端免费学习笔记（深入）”；
为什么 clear: both 加在浮动元素自己身上没用
这是高频误解。写成这样：
.float-item {
float: left;
clear: both; /* ❌ 错误：这不是清除父容器塌陷 */
}
实际效果只是让这个元素避开前面所有浮动项，和父容器高度是否塌陷完全无关。清除浮动的目标从来不是“让浮动元素自己不飘”，而是“让它的父容器能正确计算高度”。
所以必须作用于父容器（通过伪元素、额外标签或 BFC 触发），而不是浮动子元素本身。
现代项目里，其实该考虑“不浮动”了
伪元素和 overflow 都是补救方案，本质是给过时布局方式兜底。真实开发中：
- 文字环绕图片？用
float: left+margin仍是目前最轻量、语义最准的解法 - 多列卡片、导航栏、网格列表？直接上
display: flex或display: grid——它们天然不脱离文档流，父容器高度自动撑开，根本不需要清除浮动 - 老项目维护？优先加
.clearfix类；若已有大量overflow: hidden且没出问题，别强行改，风险大于收益
真正容易被忽略的是：当你在 Vue/React 组件里用 v-if 或 useState 动态控制浮动元素显隐时，.clearfix 类可能随 DOM 销毁而丢失，得靠 key 或 ref 强制重绘 —— 这类时机问题，比写法本身更难排查。