双飞翼布局中父容器高度坍缩的解法是让中间内容区用正向margin留出左右栏空间，由其自身撑开父容器；需用内层包裹容器解耦样式与布局，ie6下通过触发haslayout或避免负margin解决兼容问题。
双飞翼布局中浮动元素撑不开父容器怎么办
根本原因是浮动元素脱离文档流，父容器高度坍缩。不能靠 overflow: hidden 硬清浮动——这会截断绝对定位下拉菜单或阴影，也不该用 clear: both 在父容器末尾加空标签，破坏语义。
双飞翼的解法是：**让父容器不依赖浮动子元素撑高**，而是由内部非浮动结构（如中间内容区）通过 margin 主动“留出空间”，把左右栏“挤”进预留位置。
- 左栏用
float: left+ 固定宽，右栏同理float: right - 中间内容区不浮动，但用
margin-left和margin-right分别让出左右栏宽度 - 父容器只需设
height: auto（默认值），它会由中间区这个非浮动块正常撑开
为什么必须用内层包裹容器而不是直接给中间内容加 margin
因为中间内容区本身可能包含多层嵌套、响应式排版或动态插入的 DOM 节点。如果直接在 .main 上写死 margin-left: 200px，一旦左栏宽度变化（比如媒体查询切换为 180px），就必须同步改两处——极易遗漏。
标准做法是加一层包裹：.main-wrap 作为视觉内容区，.main 仅作布局容器：
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main">
<div class="main-wrap">内容</div>
</div>
</div>
-
.main设margin: 0 200px 0 200px（对应右栏、左栏宽度） -
.main-wrap宽度自适应，内边距/字体等样式全写在这里，与布局解耦 - 后续调整栏宽时，只改
.main的 margin，不影响内容渲染逻辑
IE6 下双飞翼的 margin 负值失效问题怎么绕过
IE6 对 margin 的解析有 bug：当父容器未设 hasLayout，且子元素用了负 margin，可能导致重叠或错位。这不是双飞翼独有问题，但在此结构中尤其明显——中间区常被写成 margin: 0 -200px 来反向覆盖浮动占位，IE6 会忽略这个负值。
- 给
.container加zoom: 1或height: 1%触发 hasLayout - 避免对中间区用负 margin；改用正向
margin-left/right配合左右栏的width精确控制 - 若必须兼容 IE6，左栏建议用
position: relative; left: -100%替代 float，配合.main的margin-left挤出空间（此为圣杯布局变体，双飞翼原生不推荐）
双飞翼比 Flex/Grid 多出的维护成本在哪
核心在于“宽度耦合”：左右栏宽、.main 的 margin、媒体查询中的断点，三者必须严格一致。改一个地方漏掉另一个，布局立刻错乱。
- 用 CSS 变量可缓解：
--sidebar-width: 200px，然后.left { width: var(--sidebar-width); }，.main { margin: 0 var(--sidebar-width); } - 但 IE 不支持 CSS 变量，若需兼容，只能靠预处理器（如 Sass 的
$sidebar-width: 200px）统一管理 - 现代项目优先用
display: grid实现同等效果，grid-template-columns: 200px 1fr 200px一行搞定，无浮动、无 margin 计算、无 hasLayout 陷阱
双飞翼真正的价值不在“还能用”，而在于理解“如何用非弹性手段模拟弹性布局”——当你需要在不支持 Flex 的旧系统里打补丁，或调试一段遗留代码时，那个 .main 上的 margin 值，就是你定位问题的起点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
