圣杯布局与双飞翼布局

圣杯布局和双飞翼布局都解决同一个旧问题：左右栏固定宽度，中间栏自适应，并让中间内容在 HTML 中优先出现。

传统实现先让三列浮动，再通过负 margin 把左右栏拉到同一行：左栏使用 margin-left: -100%，右栏使用自身宽度的负值。

两种方案的区别

圣杯布局在外层容器设置左右 padding，为侧栏预留空间，再用相对定位把两侧移动到 padding 区域。双飞翼布局则在中间列内部增加一层包裹，通过它的左右 margin 留出空间，侧栏本身不再相对定位。

它们值得学习，因为能帮助理解普通流、浮动和百分比负 margin 如何协作。但在现代项目中，Grid 更直接：

.layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 160px;
}

如果视觉顺序与 DOM 顺序不同，还要检查键盘和屏幕阅读器的阅读顺序。经典题解应该解释历史机制，也应该说明今天为什么通常会选择 Grid 或 Flexbox。