calc()配合float实现左固定右自适应本质是显式计算右侧宽度，但必须确保父容器有明确宽度并触发bfc清除浮动，否则会因脱离文档流导致塌陷或错位。
直接说结论：用 calc() 配合 float 实现“左固定右自适应”，本质是让右侧元素靠 float: left 保持同行，再用 width: calc(100% - 左侧宽度) 控制其宽度——但必须注意父容器有明确宽度，且浮动元素需清除，否则后续内容会塌陷。
为什么 calc() + float 容易出错
很多人写完发现右侧没贴右边、高度塌了、或者后面元素上移，根本原因不是 calc() 写错了，而是忽略了浮动布局的底层约束：
-
float元素脱离文档流，父容器默认不包裹它们，所以必须触发 BFC（比如加overflow: hidden或伪元素清除） -
calc(100% - 100px)中的100%是相对于父容器宽度计算的——如果父容器没设宽（比如width: auto且没限制），100%就可能为 0 或不可预期 - 两个
float: left元素并排时，右侧元素若没设宽，默认会收缩到内容宽度，calc()必须显式赋给width才生效
calc() + float 的最小可靠写法
以下是最简可运行组合，无额外 hack，兼容 IE9+：
.container {
width: 100%; /* 必须有明确宽度，如 1200px 或 100vw */
overflow: hidden; /* 触发 BFC，包裹浮动子元素 */
}
.left {
float: left;
width: 200px;
background: #eee;
}
.right {
float: left;
width: calc(100% - 200px);
background: #ccc;
}
关键点：
-
.container的overflow: hidden不可省——它既是清除浮动的手段，也是防止右侧溢出的保险 -
.right必须同时有float: left和width: calc(...)，缺一不可 - 单位要一致：
200px不能写成200，calc(100% - 200px)里不能混用em和px
和 float + margin-left 方案比，calc() 有什么实际区别
表面看都是“左侧定宽、右侧留空”，但行为逻辑完全不同：
-
margin-left方案中，右侧元素宽度仍是auto，靠外边距“挤”出空间，它实际宽度 = 父容器宽 -margin-left，但这个过程是隐式的，不好控制最小宽度或响应式缩放 -
calc()方案显式声明了宽度，你可以叠加min-width或媒体查询：width: calc(100% - 200px); min-width: 300px;，更可控 - 当父容器宽度动态变化（比如 resize 或响应式断点），
calc()会实时重算，而margin-left只挪位置，不改右侧自身宽度 - 性能上无明显差异，但
calc()在旧版 Safari（vh/vmax支持不稳定，纯px和%组合最稳
真正容易被忽略的是：这个组合只解决“同级两元素并排”，一旦你加了 padding、border 或 box-sizing 不一致，calc() 的结果就会偏移——务必统一设 box-sizing: border-box，否则 200px 左侧 + calc(100% - 200px) 右侧，实际总宽会超父容器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
