直接用.clearfix::after伪元素法是兼顾语义化、兼容性和可维护性的最优解，因其能修复父容器高度塌陷问题，而clear: both单独使用仅控制自身下移，无法解决塌陷。
直接用 .clearfix::after 伪元素法，是目前兼顾语义化、兼容性和可维护性的最优解。
为什么不能只靠 clear: both 单独使用？
单独给某个元素写 clear: both 只能控制「它自己」下移到浮动元素下方，但无法修复父容器高度塌陷问题。父容器仍会把浮动子元素“视而不见”，导致背景、边框、后续兄弟元素布局全部错乱。常见错误现象是：父容器 border 看得见，但内部空白、背景色不显示、下方内容顶上来。
使用场景有限：仅适用于你明确知道「这个元素必须严格排在所有浮动之后」，比如文章末尾的版权栏、分隔线等固定位置元素。
.clearfix::after 的标准写法与关键参数
现代项目推荐以下写法（已剔除 IE6–7 兼容 hack，如需支持老版本再加 *zoom: 1）：
.clearfix::after {
content: "";
display: block;
clear: both;
}
要点说明：
-
content: ""是必需的，空字符串即可；不写或写none会导致伪元素不渲染 -
display: block必须，否则clear不生效（inline元素忽略clear） - 无需
height: 0或visibility: hidden—— 空content+block本身无视觉占用 - 不要用
display: table替代block，部分旧版 Safari 对table伪元素的clear支持不稳定
比 clearfix 更现代的替代方案：display: flow-root
如果目标浏览器支持（Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+），直接给父容器设：
.container {
display: flow-root;
}
原理是创建新的 BFC，天然包裹浮动子元素，且不依赖伪元素、不增加额外样式规则。优势明显：
- 一行代码解决，无任何副作用
- 不会像
overflow: hidden那样意外裁剪阴影、下拉菜单或 position: fixed 元素 - 比
clearfix更轻量，CSS 解析和重排开销更低
注意：IE 完全不支持，若需兼容 IE11，仍应回退到 .clearfix。
容易被忽略的边界情况
即使用了 .clearfix 或 flow-root，仍有两个点常被漏掉：
- 浮动元素本身没设置
width—— 块级元素浮动后宽度收缩为内容宽，可能导致父容器无法按预期撑开 - 父容器同时设置了
min-height但没设height: auto—— 某些旧版 Android WebView 下，min-height会干扰 BFC 的高度计算逻辑
真正要稳，得确认浮动子元素有明确宽度（或 flex: 1 等弹性行为），且父容器未用其他属性干扰 BFC 触发条件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
