双飞翼布局是专为IE6–IE7兼容设计的过时方案，现已被flex和grid取代；它依赖负margin、padding预留与BFC触发，结构脆弱、调试困难，仅适用于老项目维护或面试考察。

别从双飞翼布局开始学 HTML。

双飞翼布局不是入门练习，而是兼容性补丁

它诞生于 2006 年左右，专为绕过 IE6–IE7 的渲染缺陷而设计。你现在打开 Chrome、Firefox 或 Edge，display: flex 或 display: grid 一行代码就能实现三栏等高、中间优先、自适应宽度——根本不需要写 margin-left: -100%、overflow: hidden、zoom: 1 这些易错又难调试的 hack。

• 真想练三栏布局，直接用 display: flex：.container { display: flex; } + .center { flex: 1; } + .left, .right { width: 200px; }
• 想保留 HTML 中间内容在前（利于 SEO），加一句 .left { order: -1; } 和 .right { order: 1; } 就行
• 双飞翼要求你手动算 margin-left: -100% 对应谁的宽度、padding 留多少、overflow: hidden 会不会裁掉阴影或下拉菜单——零基础根本没法判断哪一步错了

如果非要手写双飞翼，必须严格按结构来

HTML 顺序不能乱：<div class="main-wrap"><div class="main"><div class="main-content">...</div></div></div>，再跟 <div class="left"> 和 <div class="right">。少一层 .main-content，margin 就会撑破 width: 100%，整个布局崩掉。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• .main-wrap 必须设 overflow: hidden（或伪元素清浮动），否则高度塌陷，footer 直接叠在内容上
• .left 的 margin-left: -100% 是按 .main-wrap 宽度算的，不是视口宽，也不是 .main 宽
• .main-content 的 margin: 0 200px（假设侧栏各 200px）必须和 .left/.right 的 width 严格一致，差 1px 都可能重叠或留白

常见错误现象及定位方式

左栏/右栏没显示，或压住中间文字，90% 是这三个地方出问题：

立即学习“前端免费学习笔记（深入）”；

• .main-wrap 没触发 BFC：检查是否漏了 overflow: hidden 或清浮动伪元素
• .main-content 的 margin 值 ≠ 侧栏 width：比如侧栏设 width: 220px，但 .main-content 写了 margin: 0 200px
• .left 和 .right 没同级、没同向浮动：必须都 float: left，不能一个 left 一个 right；也不能把 .left 套进 .main 里

真正难的不是抄几行 CSS，而是理解每个百分比、每个负 margin 绑定的是哪一层容器的尺寸——这种耦合在响应式断点切换时会突然失效，且很难复现。现代布局方案没有这种隐式依赖。