Less中用calc()配合float不能提升兼容性，反而降低兼容性；正确做法是用变量定义宽度（如@sidebar-width: 200px），编译为静态margin-left: 200px，确保IE6安全，并用::after清浮动。
Less里用calc()配合float真能提升兼容性？
不能。反而会降低兼容性——calc()在 IE9 才开始支持，而 float + margin 方案本身根本不需要 calc()。强行混用只会让 IE8/IE9 下计算失效、右侧内容被左侧遮盖。真正兼容到 IE6 的写法是：左侧固定宽 + float: left，右侧用硬编码 margin-left（值 ≥ 左侧宽度），不依赖任何运行时计算。
Less中怎么安全封装 float 两栏布局？
用变量控制宽度，但避免在 margin-left 里套 calc()。Less 编译期就能把变量转成静态值，既保持可维护性，又不牺牲兼容性。
@sidebar-width: 200px;.sidebar { float: left; width: @sidebar-width; }-
.main { margin-left: @sidebar-width; }—— 这行编译后就是margin-left: 200px，IE6 安全 - 父容器加
.container::after { content: ""; display: table; clear: both; }清浮动，比overflow: hidden更稳妥（避免裁剪box-shadow或position: absolute子元素）
为什么 Less 里写 margin-left: calc(100% - @sidebar-width) 是错的？
三个实际问题：
- IE8 及以下直接忽略该声明，右侧内容塌陷到左侧下方
- 即使 IE9+ 支持
calc()，它也只接受「单位一致」的运算，100% - 200px合法，但100% - @sidebar-width在 Less 编译时若未显式带单位（比如写成@sidebar-width: 200而非@sidebar-width: 200px），会导致编译失败或生成非法 CSS - 语义错误：
calc(100% - 200px)算的是「相对于父容器宽度减去 200px」，但右侧区域真正需要的是「避开左侧浮动块」，不是「占满父容器减去 200px」——当父容器窄于 200px 时，这个值会变负，布局彻底崩坏
移动端适配时 float 两栏还适用吗？
不适用。float 布局本质是为 PC 端文档流设计的，响应式断点里强行用 @media 切换 float 和 display: block 极易引发重排错乱，且无法控制视觉顺序（比如侧边栏必须在 DOM 前但视觉后）。现代项目里，该放弃就放弃——float 方案只保留在需兼容 IE8 及以下的老系统维护场景中；新项目统一用 flex，用 order 控制 DOM 顺序与视觉顺序分离，这才是真正可控的响应式基础。
