clear: both加在父容器上无效，因它只对浮动元素后的块级兄弟元素生效；::after伪元素需用display: table触发bfc，content: ""不可省略，ie6/7需*zoom: 1触发haslayout。
为什么clear: both直接写在父容器上没用
因为clear属性只对「自身是块级元素」且「位于浮动元素之后的兄弟元素」生效。把它加在父容器上，浏览器根本不会去检查子元素是否浮动——它只是个容器，不是浮动链中的“下一个元素”。常见错误就是给.container加clear: both，结果高度照塌。
::after伪元素必须用display: table而不是block
在CSS2.1规范下，display: table能可靠触发BFC（Block Formatting Context），确保父容器重新包含浮动子项；而display: block在某些字体设置或行高环境下可能产生基线间隙，意外撑高容器。IE8+支持::after，但IE6/7不支持，所以不能只靠它。
-
content: ""不可省略，否则伪元素不渲染 -
display: table比display: block更稳，避免BFC触发失败 -
clear: both必须作用于这个伪元素本身，不是父容器
IE6/7必须用*zoom: 1触发hasLayout
IE6/7没有BFC概念，而是靠hasLayout机制让容器“意识到”自己该包裹子元素。*zoom: 1是私有写法，仅IE6/7识别，能强制触发hasLayout，且不影响其他浏览器。不用height: 1px或width: 1px——它们会真实改变尺寸，而zoom只是重绘信号。
-
*zoom: 1写在同一个选择器里，和::after规则并存 - 不要用
overflow: hidden替代：它会裁剪box-shadow、transform溢出部分 - 不要用
display: inline-block：它在IE6/7中会触发hasLayout但带来额外换行问题
最终可直接复制的兼容代码长这样
这段代码覆盖IE6–Edge（旧模式）、Chrome/Firefox/Safari，符合CSS2.1语义，无冗余标签，不破坏布局流：
.clearfix::after {
content: "";
display: table;
clear: both;
}
.clearfix {
*zoom: 1;
}
注意：*zoom前面的*是IE6/7专用前缀，现代浏览器会忽略；::after双冒号是CSS2.1+标准写法，IE8起支持。如果项目还要求IE7–，别改用:after单冒号——那反而会破坏IE8+的解析一致性。
真正容易被忽略的是：一旦用了display: table，伪元素就不再受font-size或line-height影响，这点比height: 0; visibility: hidden;更干净。但如果你在父容器上同时写了vertical-align，就得小心——table会把它当单元格处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
