::after加clear: both不生效的主因是父容器未触发bfc，导致伪元素无法影响浮动流；需设display: block并配合overflow: hidden等bfc创建属性。
为什么 ::after 伪元素加了 clear: both 还是不生效
常见原因是父容器没有触发 BFC（块级格式化上下文），导致 ::after 生成的内容虽存在，但无法影响浮动子元素的布局流。此时 clear 只作用于自身所在行，而浮动元素已脱离文档流，父容器高度塌陷，::after 实际“无处可清”。
实操建议：
- 确保父容器设置了
overflow: hidden、display: flow-root或float等能创建 BFC 的属性 -
::after必须设为display: block（默认是inline，clear对 inline 元素无效） - 避免同时对同一父元素既用
float子项又依赖::after清除——优先改用display: flex或display: grid
::after 清浮动的标准写法与兼容性取舍
最稳妥的清除方式不是靠 clear，而是利用 BFC 自动包裹浮动子项。但若必须用 ::after，标准写法如下：
.clearfix::after {
content: "";
display: block;
clear: both;
}
.clearfix {
*zoom: 1; /* IE6/7 hack */
}注意点：
立即学习“前端免费学习笔记（深入）”；
-
content值不能为空字符串以外的形式（如content: " "也行，但不能省略） -
*zoom: 1是 IE6/7 触发 hasLayout 的 hack，现代项目可删 - Chrome/Firefox/Safari 中
display: table也能清浮动，但会引入额外的匿名框，不如block直接
用 display: flow-root 替代 ::after 清浮动更简单
如果目标浏览器支持（Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+），display: flow-root 是比 ::after 更干净的解法——它直接让容器建立新 BFC，自动包含所有浮动子项，无需伪元素和 clear。
对比效果：
- 旧写法：
.parent { /* 需要 .clearfix 类 + ::after */ } - 新写法：
.parent { display: flow-root; }，一行解决，无副作用 - 不支持时回退方案：用
@supports not (display: flow-root) { ... }补::after
为什么给 ::after 加 height: 0 或 visibility: hidden 反而出问题
这类操作容易破坏清除效果。因为：
-
height: 0本身不影响clear，但如果同时设了overflow: hidden，可能裁掉伪元素的“清除位置” -
visibility: hidden会让元素仍占布局空间，但视觉不可见——这没问题；但若误用display: none，则伪元素彻底不参与渲染，clear完全失效 - 真正该隐藏的是内容而非清除行为，所以保持
content: ""+display: block即可，无需额外隐藏
复杂点在于：清除本质是布局位置的强制换行，不是视觉控制。很多人盯着“看不见”去调样式，却忽略了它是否还在文档流中真正起作用。
