中间栏掉到下面是因为浮动导致父容器塌陷且HTML结构错误：main未置于最前，三栏未全设float:left，父容器未触发BFC；正确做法是main置首、全浮动、overflow:hidden清浮。
为什么中间栏总掉到下面？
因为浮动元素脱离文档流，父容器高度塌陷，同时 HTML 结构没按要求写——main 必须放在最前面。你看到“只显示一栏”，大概率是 main 在 left 和 right 后面，或者父容器没清浮动。
常见错误现象：left 和 right 浮起来了，但 main 卡在它们下方，整个布局只剩左栏可见。
-
main元素必须是 HTML 中第一个子元素 - 三栏都要加
float: left（包括main） - 父容器必须触发 BFC，推荐用
overflow: hidden，别只靠clear: both的空 div
left 和 right 的负 margin 怎么设才不乱？
负 margin 不是随便填个数，它和宽度、顺序、方向强绑定。漏改一个值，侧栏就盖内容或错位。
假设 left 宽 200px、right 宽 180px：
立即学习“前端免费学习笔记（深入）”；
-
left：加margin-left: -100%（不是-200px），目的是让它从行首“往回拉”贴住容器左边缘 -
right：加margin-left: -180px（不是margin-right），且必须写在left之后，否则层叠顺序错，会被left盖住 -
main：设width: 100%，再用margin: 0 180px 0 200px留出左右空间，否则文字直接被侧栏遮挡
改了侧栏宽度，哪些地方必须同步改？
只要动了侧栏的 width，以下三处必须立刻同步更新，缺一不可：
-
left的margin-left值（如果用百分比，不用改；如果用像素，比如原-200px，新宽 220px 就得改成-220px） -
right的margin-left值（同上，按新宽重设） -
main的margin-left和margin-right（分别对应左右栏新宽）
漏改任意一项，就会出现内容被裁、侧栏重叠、或整行错位。这不是浏览器兼容问题，是计算逻辑断链。
IE6/7 下负 margin 失效怎么办？
老 IE 对 margin-left: -100% 解析不稳定，基准可能误算成视口宽而非父容器宽，导致左栏飘走。
- 给父容器加
zoom: 1强制触发 hasLayout - 避免在
left内部嵌套display: inline-block元素（会多出空白间隙） -
right改用固定像素负 margin（如margin-left: -180px），它不受百分比解析影响
真正难调的不是写法，而是所有数值之间的咬合关系——宽度、负 margin、main 的 margin，三者必须像齿轮一样严丝合缝，差 1px 都可能崩掉布局。
