双飞翼布局中父容器高度为0是浮动脱离文档流的正常表现，并非bug；需通过display:flow-root等安全方式触发bfc撑高，同时严格匹配.left/.right宽度与.main的左右margin值。
双飞翼布局里父容器高度为0，根本不是“崩溃”，是浮动的正常行为
浮动元素脱离文档流，父容器自然无法感知其高度——这不是 bug，是 CSS 规范定义的结果。你看到的“内容溢出”“背景消失”“下一块元素顶上来”，全是因为 .container 的 computed height 是 0px。别急着改 .left 或 .right，先确认父容器是否真正包裹了所有浮动子项。
padding: 0 200px 不是万能解，它只解决“定位空间”问题，不解决塌陷
圣杯布局用 padding 预留左右空间，是为了让 margin-left: -100% 和 margin-left: -200px 能把侧栏“塞进”空白区；但这个 padding 本身不会让父容器恢复高度——它只是视觉上腾出位置，.container 依然可能高为 0。
-
.container { padding: 0 200px; }后，如果没触发 BFC，父容器仍塌陷，侧栏会溢出到容器外（尤其右栏） - 若同时用了
overflow: hidden，确实能撑高容器，但会裁剪box-shadow、transform偏移或position: absolute下拉菜单 - 更稳妥的是搭配
display: flow-root：.container { padding: 0 200px; display: flow-root; }，既预留空间又安全撑高
为什么只加 padding 还是错位？检查三个宽度是否对齐
双飞翼真正脆弱的地方在于三处宽度强耦合：.left 的 width、.right 的 width、.main 的 margin。漏改一处，就 visibly broken。
- 假设
.left { width: 200px; }，.right { width: 220px; }，那.main必须写margin: 0 220px 0 200px，不能反着写，也不能用百分比 - 如果侧栏加了
border: 1px solid或box-shadow，记得把它们的尺寸也计入.main的 margin 值，否则视觉上会向内缩或溢出 - 响应式场景下，用媒体查询改
.left宽度时，必须同步更新.main的margin-left，否则左栏直接盖住主内容
IE6/7 下 padding + 负 margin 组合容易失效，别硬扛
IE6 对 padding 和负 margin 的解析有 bug：当父容器未触发 hasLayout，margin-left: -100% 可能被忽略，导致左栏卡在中间；padding 也可能被压缩或错位。
- 给
.container加zoom: 1或height: 1%强制触发 hasLayout - 避免依赖
-100%，降级用固定像素值：.left { margin-left: -200px; }，并在条件注释中单独提供 IE6 样式 - 更现实的做法是：现代项目直接放弃双飞翼，用
display: flex或grid替代；只有必须支持 IE8–9 且 SEO 优先的老 PC 端才值得投入兼容成本
width 却忘了动 .main 的 margin，或者以为 padding 自带清浮动能力。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
