右侧固定、左侧自适应布局的核心是右栏定宽、左栏撑满剩余空间，需确保html顺序（左栏在前、右栏在后）与css逻辑匹配；flex方案用display: flex+flex:1，grid方案用grid-template-columns: 1fr 280px，float方案需右栏float:right+左栏margin-right预留空间。
右侧固定、左侧自适应，本质是「右栏定宽、左栏撑满剩余空间」，不是简单加 float: right 或 margin-right 就能搞定的。关键在父容器如何分配空间，以及 HTML 元素顺序是否与布局逻辑匹配。
flex 布局：现代项目首选，但注意子元素顺序
用 display: flex 最直接：父容器设为 flex，右栏固定宽，左栏用 flex: 1 占剩余空间。但必须确保 HTML 中左栏在前、右栏在后——否则 flex: 1 会错误地撑开右栏前面的空白。
常见错误是把右栏写在 HTML 前面，结果左栏被“挤”到下一行或宽度异常。正确结构应为：
<div class="container"> <div class="main">主内容</div> <div class="sidebar">右侧固定栏</div> </div>
对应 CSS：
.container { display: flex; }
.main { flex: 1; }
.sidebar { width: 280px; }
- IE10+ 支持，IE9 及以下不认
flex: 1，会退化为块级堆叠 - 如果右栏需最小高度保护，加
min-width: 280px；但不要加flex: 0 0 280px，那会让它失去“固定”的语义（实际仍固定，但写法冗余） - 响应式时，可在媒体查询中把
.container改成flex-direction: column，让右栏自然下移
float + margin：兼容 IE6，但 HTML 顺序不能错
右侧固定、左侧自适应，用浮动反而比左侧固定更难——因为 float: right 的元素会脱离文档流，左栏若不设 margin-right，就会被它覆盖或顶到下方。
正确做法是：右栏 float: right 并设宽，左栏设 margin-right 留出空间，且左栏必须写在右栏前面：
<div class="container"> <div class="main">主内容</div> <div class="sidebar">右侧固定栏</div> </div>
CSS：
.container { overflow: hidden; }
.sidebar { float: right; width: 280px; }
.main { margin-right: 290px; }
- 右栏必须在 HTML 中后出现，否则
float: right会把左栏“推”到上一行顶部，导致布局断裂 -
overflow: hidden是为了清除浮动，防止父容器塌陷；也可用伪元素方案，但没必要过度复杂化 - 这个方案在 IE6–8 下表现稳定，但右栏无法随内容高度自适应撑高父容器（除非父容器有明确高度或触发 BFC）
grid 布局：代码最简，但别在 IE 里用
只需一行声明就能定义两列：grid-template-columns: 1fr 280px，左边自动占满，右边严格固定。不需要关心 HTML 顺序，也不用清除浮动或处理 flex 换行。
.container {
display: grid;
grid-template-columns: 1fr 280px;
}
- Chrome 57+、Firefox 52+、Safari 10.1+ 支持；Edge 16+ 支持，但 IE 完全不支持（包括
-ms-grid也无法等效实现「左自适应+右固定」） - 如果右栏内容超长，它不会换行也不会溢出，而是撑宽自身——所以建议加
max-width: 280px和overflow-wrap: break-word防止横向滚动 - 不推荐在需要支持旧版企业内网系统的项目中使用
最容易被忽略的一点：无论用哪种方案，右栏的宽度值（如 280px）必须在所有相关地方保持一致——width、margin、grid-template-columns 三处若有一个写错，布局立刻错位。建议抽成 CSS 变量（--sidebar-width: 280px），尤其在多处复用时。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
