中间栏掉下去是因为父容器未设height或未触发BFC导致高度塌陷，且HTML结构错误（中间栏未置前）；正确做法是中间栏写在最前、设width:100%并用margin留出侧栏空间，侧栏用float+固定宽+负margin拉回。
圣杯布局用浮动+负边距时，为什么中间栏会掉下去？
因为没给父容器设 height 或触发 BFC，浮动子元素脱离文档流后，父容器高度塌陷，导致后续元素（比如 footer）直接顶上来，看着像“中间栏掉下去”。更常见的是三栏顺序写错了——HTML 结构必须是：中间栏写在最前面，左右侧栏跟在后面。
- 正确 HTML 顺序：
<main>→<aside class="left">→<aside class="right"> -
main设width: 100%，再用margin-left和margin-right留出左右栏位置 - 左右栏用
float: left/right+width+position: relative+ 负margin拉回原位（比如左栏加margin-left: -100%，右栏加margin-right: -200px） - 父容器最后要清浮动，推荐用
overflow: hidden或伪元素::after，别只靠<div style="clear:both">
左右栏固定宽度、中间栏自适应的浮动方案怎么写？
核心是让中间栏“先占满”，再用负边距把左右栏塞进空隙里。左右栏的 width 必须写死（比如 200px），中间栏不能设固定宽，否则无法自适应。
- 左栏：
float: left; width: 200px; margin-left: -100%; - 右栏：
float: right; width: 200px; margin-right: -200px; - 中间栏：
width: 100%; margin: 0 200px;（左右各留 200px 给侧栏） - 注意：
margin-left: -100%是为了让左栏从行首“往回拉”到容器左边，不是拉到视口左边
IE6/7 下负边距失效或错位怎么办？
老 IE 对百分比负边距解析不稳定，尤其 margin-left: -100% 在某些场景下会算错基准（按父容器宽还是视口宽）。这不是 bug，是它对 position 和 float 的组合处理不一致。
- 兼容方案：左栏改用
margin-left: -200px（和自身宽度一致），而不是-100% - 右栏保持
margin-right: -200px即可，它不受百分比影响 - 必须给父容器设
zoom: 1触发 hasLayout，否则浮动和负边距都可能失灵 - 避免在左栏里嵌套
display: inline-block元素，老 IE 会多出空白间隙
为什么现在不推荐在新项目里用浮动圣杯布局？
因为语义混乱、维护成本高、响应式难适配。浮动本质是为图文环绕设计的，硬撑三栏布局，一旦加 padding、border 或 flex 子元素，就容易触发重排错乱。
立即学习“前端免费学习笔记（深入）”；
- 现代替代方案：用
display: flex，三行代码搞定（flex: 0 0 200px左右，flex: 1中间） - 如果必须支持 IE9，可用
display: table模拟，比浮动稳定得多 - 浮动圣杯真正适合的场景只剩：需要兼容 IE6–8 的遗留系统，且不允许引入 CSS hack 或 JS 修复
负边距本身没问题，问题在于它和浮动绑得太死——一个参数调错，整排就垮。实际调试时，先关掉所有 margin，只留 float 看是否能并排，再一层层加负值，比对着成品代码硬调快得多。
