.clear 不能解决父容器塌陷，因它仅实现避让而非撑高；必须用 .clearfix 触发 BFC 并通过 ::after 清除浮动。
clear: both 单独加在某个元素上，从来就不是“全局清除浮动”的解法——它只管自己，不管父容器塌不塌陷。真要统一处理浮动导致的父容器高度塌陷，得靠触发 BFC + 伪元素注入清除节点，也就是 .clearfix 类。
为什么不能直接用 .clear { clear: both; }？
这个写法常见但无效：它只是让某个元素避开前面浮动元素，对父容器高度计算毫无帮助。如果父容器没形成 BFC，子元素一浮动，父容器高度照样是 0；你给最后一个子元素加 .clear，父容器依然塌陷。
-
.clear是“避让”行为，不是“撑开”行为 - 它不改变父容器的格式化上下文，无法修复高度塌陷根源
- 必须作用在浮动容器自身（即父级），而非其子元素
.clearfix 类的标准写法及兼容要点
核心是两段规则：伪元素生成清除节点 + 触发旧版 IE 的 hasLayout。现代项目可精简，但若需支持 IE8，必须保留 *zoom: 1。
.clearfix::after {
content: "";
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* IE7/8 only */
}-
display: table比block更稳妥：避免某些 IE 下 margin 折叠问题 -
content: ""不可省略，否则伪元素不渲染 -
*zoom: 1是 IE7/8 的 hack，用display: inline-block或overflow: hidden替代都不可靠
什么时候不该加 .clearfix？
加了反而多余，甚至引发意料外布局错乱：
立即学习“前端免费学习笔记（深入）”；
- 父容器已设
display: flex或display: grid—— 它们自动创建 BFC，浮动子元素的高度天然被计入，float属性本身在 flex item 上多数浏览器已忽略 - 父容器用了
overflow: hidden或overflow: auto—— 这类声明已触发 BFC，再加.clearfix属于重复干预 - 浮动仅用于文本环绕（如
img+p），且父容器无边框/背景等视觉依赖 —— 此时无需“清除”，塌陷不影响表现
应用时最容易漏掉的关键点
很多人复制了代码却失效，问题往往不在 CSS 本身：
- 忘记在 HTML 中给浮动容器加
class="clearfix"，只写了样式没挂载 - 把
.clearfix加在了子元素上，而不是浮动元素的直接父容器 - 用
::before和::after混用（比如只写::before），而标准方案依赖::after插入在末尾 - 在使用 PostCSS 或 CSS-in-JS 工具链时，
*zoom被自动剔除，导致 IE8 下伪元素不生效
真正卡住人的，从来不是写不对那几行 CSS，而是没想清楚：你到底是在解决“元素避让”还是“父容器撑高”——选错目标，代码再标准也白搭。
