最稳方案是用 display: flex：父容器设 display: flex，左右栏用 flex: 0 0 200px 锁定宽度，中间栏用 flex: 1 占满剩余空间，统一用 gap 控制间距，避免 margin 干扰分配逻辑。
用 display: flex 实现左右固定、中间自适应最稳
现代项目里直接用 flex，别碰 float 或 position: absolute ——前者是为文字环绕设计的，后者会让后续内容定位失控。父容器设 display: flex，左右栏用 flex: 0 0 200px（明确锁定不伸缩），中间栏用 flex: 1（拿走所有剩余空间）。
-
flex: 1不等于flex: 1 1 auto：后者在内容撑大时可能意外缩小，前者才真正“占满剩余” - 间距统一用
gap: 12px，别用margin——margin会干扰 flex 的空间分配逻辑 - HTML 结构必须是左-中-右顺序，否则
flex: 1会作用错对象 - IE11 不支持
gap，需降级用padding或伪元素模拟
grid-template-columns 适合语义清晰的三列结构
如果三栏有明确语义（比如 <aside></aside> + <main></main> + <aside></aside>），grid 更直观。用 grid-template-columns: 200px 1fr 240px 直接定义三列宽度，中间用 1fr 表示“等分剩余空间”。
-
1fr不是百分比，它会动态响应容器变化，比calc(100% - 440px)更可靠 - IE11 对
grid支持极差，仅限现代浏览器项目使用 - 若需兼容 IE11，
grid必须搭配@supports回退到flex -
grid-column-gap已废弃，统一用gap
为什么 float 布局现在基本不用了
float 不是布局工具，硬用来做三栏，后续问题一串：清浮动写法混乱、父容器高度塌陷、等高难实现、响应式下右栏容易掉行。
- HTML 必须把
center放最后，否则布局错乱 - 小屏幕下
float: right元素常被挤到下一行，且无法用flex-wrap控制 - 要兼容旧版 IE？不如直接上
flex+autoprefixer，现代构建工具已能自动补全 - 哪怕只支持到 IE10，
flex也能通过display: -ms-flexbox降级运行
响应式切换单列时，box-sizing: border-box 是底线
媒体查询里把三栏切单列时，很多人只改 flex-direction 或 grid-template-columns，忘了边框和 padding 会撑破容器。
- 所有参与布局的元素必须提前设
box-sizing: border-box，否则width: 100%在加padding后会溢出 - 移动端用
@media (max-width: 768px)切换，flex-direction: column即可，不用重写 HTML 结构 - 避免在媒体查询里重复写
width或margin，优先靠flex或grid自动重排 - 测试时重点看小屏下滚动条是否意外出现——大概率是没设
box-sizing或漏了overflow-x: hidden
实际复杂点不在怎么写，而在要不要兼容 IE11。如果必须支持，flex 是唯一可行路径；如果纯现代环境，grid 更干净，但别指望它能回退。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
