现代项目应使用 css grid 实现双飞翼布局，三行代码即可完成，无需手写浮动方案；仅在需兼容 ie6–ie7 时才需手写双飞翼，其核心是通过 padding、负 margin 和 overflow:hidden 实现语义优先与视觉排序分离。
别手写双飞翼布局——除非你正在维护 IE6–IE7 的遗留系统。现代项目直接用 display: grid，三行 CSS 就能实现同样效果，且 DOM 顺序、语义、可维护性全在线。
双飞翼布局只在兼容 IE6–IE7 时才需要手写
它的核心价值是让 main 内容在 HTML 中排第一（利于 SEO 和首屏加载），同时视觉上左-主-右排列，且三栏等高。这靠的是：padding 预留空间 + margin-left: -100% 拉左栏 + margin-left: -200px 拉右栏 + overflow: hidden 触发 BFC 清浮动。
- 如果你的项目最低支持 IE11 或 Chrome/Firefox/Edge 当前版，
grid或flex是唯一合理选择 - 真要跑 IE6？必须加
zoom: 1或height: 1%触发 hasLayout，否则浮动会塌 -
min-width、inline-block、百分比宽度在 IE6 里基本不可靠，所有宽度建议用px
手写双飞翼的关键 HTML 结构和 CSS 要点
结构必须是：外层 container → 中间 main 套一层 content → 左右栏平级放在 container 内（不是 content 里）。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
content设width: 100%+padding-left: 200px+padding-right: 300px（左右栏宽度） -
left设float: left+width: 200px+margin-left: -100% -
right设float: left+width: 300px+margin-left: -300px -
container必须设overflow: hidden（不能用zoom: 1，现代项目无意义）
用 CSS Grid 替代双飞翼的正确写法
不用改 HTML 结构，只要给容器加两行声明：
.container {
display: grid;
grid-template-columns: 200px 1fr 300px;
grid-template-areas: "header header header"
"left main right"
"footer footer footer";
}
main { grid-area: main; }
aside.left { grid-area: left; }
aside.right { grid-area: right; }
- 漏掉
grid-template-areas，只写grid-template-columns，main不会自动落到中间列——它会被挤到第一格 -
grid-area值必须和grid-template-areas里写的字符串完全一致，不带引号，大小写敏感 - 响应式切换时，
grid-template-areas必须同步重写，比如小屏改成"header" "main" "left" "right" "footer"
最容易被忽略的坑：DOM 顺序 ≠ 渲染顺序
双飞翼和圣杯都依赖“HTML 中 main 在前”，但手写浮动方案里，一旦 overflow: hidden 没加或 padding/margin 值没对齐，左右栏就消失或压住文字；Grid 方案里，如果忘了设 grid-area，元素会按源码顺序从左到右、从上到下填网格，根本不会按视觉需求排列。这两个问题没有中间状态——要么全对，要么全错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
