双飞翼布局仅适用于需兼容IE6–IE7的遗留系统；现代项目应优先使用flex或grid。其HTML必须三层嵌套（container→main-wrap→main），main前置以保障SEO与可访问性，通过浮动+负margin实现视觉定位，且须用zoom:1或overflow:hidden触发BFC防塌陷。
双飞翼布局不是“怎么搭”的问题，而是“要不要搭”的判断题——它只在明确需要兼容 IE6–IE7 的遗留系统中才存在实际价值；现代项目里硬套双飞翼，等于主动给自己加浮动、负 margin、BFC 清除、hasLayout 修复等一整套过时约束。
双飞翼布局的 HTML 结构必须是三层嵌套
这不是可选项，而是语义前提：DOM 顺序决定渲染和读屏顺序，中间内容必须在最前，且需用三重包裹隔离样式影响。
-
container是最外层，必须设overflow: hidden（触发 BFC，防塌陷） -
main-wrap占满整行，宽度100%，不设浮动 -
main是真正放内容的内层，靠margin: 0 200px（假设左右栏各宽 200px）预留空间 -
left和right放在main-wrap后面，不能嵌在它里面
常见错误：把 left 写进 main-wrap 里，或把 main 直接设 float —— 这会导致负 margin 失效、padding 预留错位。
负 margin 值必须严格匹配 padding 预留宽度
双飞翼的定位逻辑是“拉回”，不是“移动”。margin-left: -100% 不是指向左移整个容器宽度，而是让元素左边缘对齐到 container 左边缘；后续像素级微调靠的是 padding 预留出来的空白区。
- 若左栏宽
300px，则main必须设margin-left: 300px，left设margin-left: -100%+float: left - 若右栏宽
200px，则main设margin-right: 200px，right设margin-left: -200px+float: left - 所有宽度必须用
px，IE6 对百分比计算极不稳定
容易踩的坑：margin-left: -100% 在 flex 容器里完全无效；在双飞翼中若值写成 -200px 而非 -100%，左栏会卡在 main 右侧空白处，而不是回到容器起点。
IE6 兼容必须补 hasLayout，但 zoom: 1 不是万能解
IE6 下容器高度塌陷、子元素错位，根本原因是缺少 hasLayout。仅靠 overflow: hidden 不够，尤其当 main 内容极少时。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 给
container加zoom: 1或height: 1%，二者选一即可 - 避免同时加
min-height和zoom: 1，IE6 不支持min-height，会忽略后者 -
left和right上禁用margin-top，IE6 有双倍边距 bug，改用padding-top
注意：zoom 是 IE 专有属性，现代浏览器会忽略；如果项目已放弃 IE8 以下支持，这一步直接跳过。
现代项目别碰双飞翼，flex/grid 不是“替代方案”，而是“归还常识”
你真正要的从来不是“双飞翼”，而是“中间内容优先 + 三栏等高 + 自适应”。这个需求在 display: flex 下两行 CSS 就能闭环：
.container { display: flex; }
.center { flex: 1; order: 0; }
.left { width: 200px; order: -1; }
.right { width: 200px; order: 1; }
强行把 margin-left: -100%、overflow: hidden、zoom: 1 塞进现代代码里，只会让布局行为不可预测——比如加个 transform 就可能破坏 BFC，加个 will-change 就让负 margin 渲染异常。
最容易被忽略的一点：双飞翼的“等高”是视觉假象，三栏 DOM 高度并不一致；而 flex 的等高是真实 layout 行为，JS 读取 offsetHeight 才不会出错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
