clear: both 单独使用常失效，因其仅作用于紧邻后续块级元素，而浮动元素已脱离文档流；若父容器未形成BFC，会导致高度塌陷、文字绕排错乱、模块位置偏移等问题。
为什么 clear: both 单独用经常失效
因为 clear 只对「紧邻的后续块级元素」生效，而浮动元素已脱离文档流——它后面的元素如果没形成新块格式化上下文（BFC），就会直接从浮动下方“穿过去”，此时加 clear: both 也没用。常见现象是父容器高度塌陷、文字绕排错乱、后续模块位置飘移。
- 浮动子元素未撑开父容器，父容器
height为 0 - 给父容器后一个兄弟元素加
clear: both，看似“清了”，但只是把那个兄弟元素下推，父容器本身仍塌陷 - 用
overflow: hidden强制触发 BFC 虽有效，但会意外裁剪position: absolute子元素或阴影
::after 伪元素 + clear 的标准写法
这是目前最干净、无副作用的清除方式：在浮动容器末尾插入一个不可见的伪元素，并让它承担清除职责。关键是必须同时满足三个条件，缺一不可。
- 伪元素必须设为
display: table或display: block（inline不触发清除） - 必须声明
clear: both，且不能被其他规则覆盖（比如被clear: none覆盖） - 必须有内容，哪怕只是
content: ""；空字符串也行，但不能省略content
标准写法：
clearfix::after {
content: "";
display: table;
clear: both;
}
为什么推荐用 display: table 而不是 display: block
display: table 在 IE8+ 中表现稳定，且天然不占额外高度（block 在某些老版 Chrome 下可能多出 1px 间隙）。更重要的是，它不会继承父容器的 line-height 或 font-size，避免因样式继承导致伪元素意外撑高容器。
-
display: block在部分 Android 4.x WebView 中曾有清除失效记录 -
display: flex或display: grid会破坏伪元素的清除逻辑，不能混用 - 不要写
display: table-cell—— 它不响应clear
现代项目里要不要还写 clearfix
如果你用的是 Flexbox 或 Grid 布局，基本不需要。但只要还在维护老代码、兼容 IE11、或者用 CSS-in-JS 动态生成浮动结构（比如某些图表图例布局），clearfix 就仍是刚需。注意别把它当“通用修复”往所有容器上硬套——只加在明确包含浮动子元素的父容器上。
容易被忽略的一点：伪元素清除只作用于「当前元素内部」，如果浮动来自外部（比如通过 float: right 的兄弟元素影响本容器），clearfix 完全无效，得换思路，比如用 margin 避让或改用 flex 重构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
