结论：别用 calc() + float 封装三栏布局 mixin——兼容性假象大，维护成本真高，现代项目里纯属倒退。因 calc() 在旧版 safari 等浏览器中存在解析异常，float 布局本身已过时，且现代项目应优先采用 flexbox 或 grid。
直接说结论：别用 calc() + float 封装三栏布局 Mixin —— 兼容性假象大，维护成本真高，现代项目里纯属倒退。
为什么 calc() + float 组合在 Sass 里不值得封装
有人想用 @mixin three-col($left: 300px, $right: 300px) 自动生成 float: left、width: calc(100% - #{$left} - #{$right}) 这类代码，初衷是“兼容 IE9+”。但实际踩坑远多于收益：
-
calc()在旧版 Safari（calc(100% - 20px - 3em)）支持不稳定，Sass 编译后无法做运行时降级 -
float布局依赖clear或伪元素清除，Mixin 若漏掉::after或写错content: ""，整行就塌陷，且错误不报 CSS 语法错误，只在视觉上失效 - 一旦父容器有
zoom: 1或触发 hasLayout 的属性，IE 下calc()可能被忽略，Mixin 产出的样式等于白写 - 响应式场景下，
@media里重复@include three-col()会导致生成大量冗余calc()表达式，而现代浏览器早就不需要这种手动计算
如果非要用 float，清除浮动必须手写，不能靠 Mixin 自动注入
很多 Mixin 尝试用 @at-root 或 &::after 自动插入清除逻辑，但问题在于：清除必须作用于**浮动容器本身**，而不是某个抽象 class。Mixin 无法可靠判断调用位置是否为直接父容器。
- 正确做法是：浮动规则和清除规则写在同一选择器下，例如：
.layout-3col { float: left; } .layout-3col::after { content: ""; display: table; clear: both; } - 不要写成
@mixin clearfix { &::after { ... } }再套在其他 mixin 里 ——&指向不确定，容易挂到子元素上 - 若用
overflow: hidden清除，注意它会裁剪position: absolute子元素的溢出部分，Mixin 无法预判这个副作用
真正值得封装的，是 Grid/Flex 的降级兜底逻辑
现代三栏布局应默认用 display: grid 或 display: flex，Sass Mixin 的价值在于安全降级，而非倒退回 float：
- 用
@supports (display: grid)包裹 Grid 布局，内部再用@mixin grid-three-col($gutter: 1rem)封装grid-template-columns和gap，语义清晰、无副作用 - 对老版本 Flex 支持（如 iOS 8 的
-webkit-flex），Mixin 可统一加前缀，但仅限已知需兼容的 UA，不盲目全加 - 若项目强制要求 IE10/11 支持，优先用
display: -ms-flexbox+flex-direction: row，而非硬套calc()+float—— 微软自家引擎对 Flex 降级的支持比calc()稳定得多
最后提醒一句：所有试图用 Sass 把 float + calc() 封装成“兼容三栏方案”的 Mixin，本质是在用编译时工具解决运行时渲染差异问题 —— 这个思路本身就错了。真正的兼容性来自分层策略，不是函数封装。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
