用 display: flow-root 一行解决高度塌陷，现代浏览器全支持；clear: both 加在父元素无效，因 clear 控制自身位置而非子项高度，真正清除需在浮动子项后的同级块元素上生效。
直接用 display: flow-root，现代浏览器全支持，一行解决，不裁剪下拉菜单、box-shadow 或绝对定位弹层。
为什么 clear: both 加在父元素上完全无效
clear 控制的是「自身在文档流中的位置」，不是子元素的高度感知。给父容器写 .parent { clear: both; }，它只会在前面有浮动兄弟时换行，对内部浮动子项毫无影响——子项仍脱离文档流，父容器高度还是 0。
真正起效的清除动作，必须出现在浮动子元素之后、且仍在同一父容器内的块级兄弟元素上。::after 伪元素能模拟这个“之后的兄弟”，但前提是它得渲染出来：
-
content: ""被省略或写成content: none→ 伪元素根本不生成 -
display没设，或设成inline→ 伪元素是行内级，clear: both对它无效 - 父容器自身有
overflow: hidden或transform→ 可能压制clear的布局行为
.clearfix::after 必须同时满足的三个硬性条件
漏掉任意一个，父容器高度照样塌陷：
-
content: ""—— 必须存在，空字符串即可；content: " "也行，但不能省略或写none -
display: table—— 推荐值；比display: block更稳：自动触发 BFC、不继承line-height、避免 IE8/9 下 margin 合并导致的额外高度 -
clear: both—— 真正起清除作用的部分；clear: left或right在双向浮动混用时会漏清
标准写法就这三行，别加多余属性：
.clearfix::after {
content: "";
display: table;
clear: both;
}
什么时候不该用 .clearfix，反而会坏事
它不是万能补丁，强行套用可能引入新问题：
- 父容器已是 BFC 容器：
overflow: hidden、display: flow-root、position: absolute等，再加::after属于冗余，还可能因 BFC 重叠引发裁剪或定位异常 - 父容器是
display: flex或display: grid—— 浮动在 flex/grid 子项中本就失效，clear: both直接被忽略 - 父容器设了
height或max-height—— 伪元素撑不开固定高度，清除失去意义 - 项目已全面迁移到现代布局（Flex/Grid），且无需兼容 IE11 及更早版本 —— 直接用
display: flow-root更干净
最容易被忽略的一点：问题根源往往不在“怎么清”，而在“为什么还在用 float 做布局”——如果只是为了让子元素横排，flex 或 grid 才是现代解法，高度塌陷根本不会发生。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
