CSS Grid实现双飞翼/圣杯布局最省事：仅需三行核心声明——grid-template-columns: 200px 1fr 200px定义轨道，grid-template-areas指定语义区域，子元素用grid-area归属；无需负边距、BFC或DOM顺序妥协，响应式只需修改列定义。
用 CSS Grid 实现双飞翼/圣杯布局最省事
现代项目直接上 display: grid，不用纠结 DOM 顺序、负边距或 BFC 触发。核心就三行声明：
-
grid-template-columns: 200px 1fr 200px—— 左右固定、中间自适应 -
grid-template-areas: "header header header" "left main right" "footer footer footer"—— 显式定义区域语义 - 子元素用
grid-area指定归属，比如main { grid-area: main; }
注意：漏掉 grid-template-areas 或只写 grid-template-columns 不声明区域，浏览器不会自动把 <main></main> 当成“main”区域——它只认轨道名，不猜意图。响应式时改 grid-template-columns 即可，比如小屏下改成 1fr 单列。
Flexbox 实现需小心 order 和 DOM 顺序的错位
order 只改视觉顺序，不改 DOM 顺序和 tab 键焦点流。这对可访问性和 SEO 是好事，但容易误以为“结构已重排”。真实场景中常见问题：
- 键盘用户按 Tab 键，焦点仍按 HTML 顺序走（左→主→右），而眼睛看到的是（主→左→右）
- 如果 left/right 栏用了
position: absolute或z-index覆盖 main，屏幕阅读器可能跳过它们 -
flex: 1对main有效，但对aside.left和aside.right必须设flex: 0 0 200px，否则缩放时会被压缩变形
推荐结构保持 <header></header> → <main></main> → <aside class="left"></aside> → <aside class="right"></aside> → <footer></footer>，再靠 order 调整视觉位置。
立即学习“前端免费学习笔记（深入）”；
浮动 + 负 margin 的圣杯/双飞翼现在只剩兼容旧 IE 的价值
这类写法在 Chrome/Firefox/Edge 中能跑，但本质是 hack：靠 margin-left: -100% 把左栏拽回容器开头，再用 position: relative 微调。问题很实际：
- DOM 中
main必须写在left和right前面才符合语义，但浮动方案要求它写在中间或最后才能拉得动——多数老教程把main放最后，直接破坏可访问性 -
overflow: hidden强制触发 BFC，会意外裁剪子元素的box-shadow或transform溢出部分 - 侧边栏高度略高于 main 时，容器不会自动等高，得额外加
min-height或 JS 补齐
除非你正在维护一个必须支持 IE9 的后台系统，否则别碰。连 IE11 都已停止支持，这种写法没有新增价值。
双飞翼比圣杯唯一实在的优势：少一个 relative 定位
双飞翼多套一层 <div class="inner">，把左右留白挪到这个内层的 <code>margin-left 和 margin-right 上，于是 left 和 right 自身可以不用 position: relative。这听起来像小优化，但它确实减少了两个易错点：
- 避免因
left: -200px和right: -200px写反导致侧栏消失 - 去掉相对定位后，侧栏的
z-index层级更可控，不会意外盖住 main 的下拉菜单
但这个优势在 Flex/Grid 时代已无意义——你根本不需要 relative 定位了。真正该关注的是：Grid 的 grid-template-areas 是否覆盖所有区域？Flex 的 flex-direction: column 是否套在了正确容器上？这些细节比“用圣杯还是双飞翼”关键得多。
