加了float仍溢出下一行，是因为浮动元素脱离文档流后，浏览器按原始起点分配空间；若右栏和中间栏未主动让位、中间栏未设width:100%并预留margin空间，或html顺序错误（非→→），就会被挤下。
浮动溢出不是“样式没生效”，而是布局逻辑断在了某个环节——漏掉 position: relative、负 margin 基准算错、或父容器没触发 BFC，三者占九成原因。
为什么加了 float 还会溢出到下一行
因为浮动元素脱离文档流后，浏览器默认按“原始浮动起点”分配空间。左栏 float: left 后，右栏和中间栏若没被主动“让位”，就会被挤下去；而中间栏如果没设 width: 100% + margin 预留空间，它自己也会被侧栏顶走。
- 检查 HTML 顺序：必须是
<main></main>→<left></left>→<right></right>，不能调换 - 确认三栏都加了
float: left（包括main），否则负 margin 失效 -
main必须设width: 100%，且用margin-left和margin-right主动腾出左右栏宽度（比如各200px） - 父容器没清浮动？加
overflow: hidden或伪元素::after，别只靠clear: both的空 div
left 和 right 的负 margin 怎么写才不飞走
百分比和像素混用是最大雷区：margin-left: -100% 是按父容器宽度算的，margin-left: -200px 是按自身 content 宽度算的——两者基准完全不同，不能互换。
- 左栏推荐：
margin-left: -100%+position: relative+left: -200px（200px是它自己的净宽） - 右栏必须用像素：
margin-left: -200px（不是-100%），再配position: relative+right: -200px - 如果左右栏有
padding: 10px且用了box-sizing: border-box，那-200px得改成-220px（含 padding） - IE8 及更早？直接放弃
-100%，左栏也改用margin-left: -200px，并给父容器加zoom: 1
父容器 padding 和子元素 position: relative 为什么必须成对出现
父容器的 padding-left: 200px 只是“留白”，不是“占位”。它不会阻止左栏贴着容器左边缘渲染；而左栏没加 position: relative，left: -200px 就无效——它只会原地偏移，不改变布局锚点。
.container { padding-left: 200px; padding-right: 200px; }.left { width: 200px; float: left; margin-left: -100%; position: relative; left: -200px; }.right { width: 200px; float: right; margin-left: -200px; position: relative; right: -200px; }- 漏掉任一环，左右栏都会压住
main文字，或直接溢出容器边界
真正难调的不是数值，而是 box-sizing 和 DOM 顺序的隐式耦合——改一个 padding，所有负 margin 和 left/right 都得重算；HTML 里 main 写错位置，整套负边距就失效。现在新项目优先用 display: grid 或 flex，圣杯布局只该出现在兼容老 IE 的补丁层里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
