clear:both不能解决父容器塌陷，因其仅使后续兄弟元素避开浮动；真正需触发BFC，如用clearfix伪元素或display:flow-root。
为什么直接用 clear: both 不够用
因为 clear: both 只能作用于后续兄弟元素，无法让父容器自动包裹浮动子元素——这是清除浮动的本质目标。真正需要的是让父容器形成新的块级格式化上下文（BFC），或插入一个“视觉上不可见但行为上有效”的清除节点。
clearfix Mixin 的标准写法（支持 IE8+）
最稳妥的方案是复现 Nicolas Gallagher 的 micro clearfix，它兼顾伪元素、zoom 触发 BFC 和兼容性：
@mixin clearfix {
&::before,
&::after {
content: "";
display: table;
}
&::after {
clear: both;
}
// IE8 支持
*zoom: 1;
}
使用时直接 @include clearfix 到浮动容器上即可。注意：必须作用于**父容器**，不是浮动子元素本身；*zoom: 1 是 IE8 的 hack，现代项目若已放弃 IE8，可删掉这一行。
现代写法：用 display: flow-root 替代伪元素
Chrome 58+/Firefox 53+/Safari 10.1+ 均支持 display: flow-root，它天然创建 BFC，无需伪元素和 hack：
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
立即学习“前端免费学习笔记（深入）”；
@mixin clearfix-modern {
display: flow-root;
}
优势明显：代码更短、无副作用、不触发重排。但要注意：flow-root 会重置某些 inherited 属性（如 font-size 在部分旧 Safari 中可能异常），且不兼容 IE 全系。如果项目需支持 IE，不能单独用这个。
容易踩的三个坑
1. 把 @include clearfix 写在浮动子元素上 —— 它只对父容器生效；
2. 忘记给父容器设宽度或触发 BFC 条件（比如 overflow: hidden 也能清浮，但会裁剪溢出内容，不如 clearfix 可控）；
3. 在 Flex 或 Grid 容器里滥用 clearfix —— 这些布局模型本身不产生浮动坍塌，加了反而可能干扰默认行为。
真正要记住的只有一条：清除浮动不是修 bug，而是主动管理格式化上下文。选哪个 mixin，取决于你愿意为兼容性让渡多少简洁性。
