浮动布局中中间列自适应的本质是「减法计算」，即用父容器宽度减去左右固定列宽度；需显式计算而非设width:auto，且必须清除浮动防止高度塌陷。
浮动布局中中间列自适应的本质是「减法计算」
浮动布局下实现中间列自适应，核心不是给它设 width: auto（这在浮动中无效），而是手动算出它的宽度：用父容器宽度减去左右固定列的宽度。浏览器不会自动帮你做这个减法，必须显式写死或用 CSS 表达式。
三种常见宽度计算方式及适用场景
实际项目中主要靠以下方式之一完成「减法」，选哪种取决于兼容性要求和维护成本：
-
固定像素减法：适用于左右列宽度完全固定（如
200px+150px），父容器也固定宽。中间列写width: 650px（假设父容器1000px）——最简单，但无响应性 -
CSS calc() 函数：现代方案，支持
width: calc(100% - 200px - 150px)。注意括号内运算符两侧必须有空格，否则部分旧版 Safari 会解析失败 -
float + margin 挤压法：左右列浮动并设固定宽，中间列不浮动、用
margin-left和margin-right留出左右空间。此时中间列块级元素会自然填满剩余空间，但需确保它没被浮动影响流式行为
容易被忽略的浮动清除与高度塌陷问题
只要用了 float，父容器大概率会高度塌陷，导致后续内容上移。中间列再怎么算宽也没用——它可能直接掉到父容器外面去了。
- 必须对浮动父容器触发 BFC 或清除浮动，例如加
overflow: hidden或伪元素::after { content: ""; display: table; clear: both; } - 如果中间列内容高度超过左右列，且没清除浮动，它下方的内容可能被左/右浮动列「穿透」覆盖（尤其在 IE8– 中）
- 不要依赖
height: 100%让中间列撑高——浮动布局中百分比高度需要所有祖先都有明确高度，实操中几乎不可行
.container {
overflow: hidden; /* 触发BFC，防止塌陷 */
}
.left {
float: left;
width: 200px;
}
.right {
float: right;
width: 150px;
}
.middle {
margin-left: 200px;
margin-right: 150px;
/* 不浮动，靠margin留空后自然占满剩余宽度 */
}中间列自适应在浮动布局里从来不是“智能适配”，而是靠人算出来的静态余量；一旦左右列变成百分比或响应式变化，calc() 就得配合媒体查询反复调整，这时候就该考虑放弃浮动，转向 flex 或 grid 了。
立即学习“前端免费学习笔记（深入）”；
