圣杯布局中的float和margin-left

在处理绿色的right区域的时候，设置了margin-left:-200px，这时绿色区域浮动到container左侧的padding区域中，而设置margin-left:-220px，绿色区域就一下进入了container本身区域，覆盖在蓝色的middle区域上，为什么没有进入container右侧的padding区域呢？

EricTaku 2017-09-20

源自：CSS网页布局基础 3-2 圣杯布局案例

收起

2回答

好帮手慕糖回答被采纳获得+3积分 2017-09-21 18:45:54

你好，大盒子下面包裹了这三个盒子，padding是大盒子的内边距，正常情况下是没有内容的。而这里的margin-left为负值，那么就会往左移动，而.right这个盒子的左边（因为这里minddle元素宽度的问题显示为上面）为middle元素，所以就会去middle元素上呀。建议：可以先移动右边的区块，查看下效果哟。

祝学习愉快~

收起回答

EricTaku 提问者 #1

谢谢你的回答，我明白了！

2017-09-24 12:16:39

小丸子爱吃菜 2017-09-20 10:26:54

左中右都设置了浮动，所以刚开始的时候左右是在中间区域的下面的。

中间区域是100%，.container设置了padding: 0 220px 0 200px;所以中间区域距离外层盒子左边会空出200px，右边空出220px；

left区域通过left和margin-left跑道左上角，right区域通过margin-left和right跑到右上角。

右侧的布局是依托于左侧，可以将属性去掉一个个加上去看看效果，这是圣杯布局的一个技巧，这些技巧了解记住就可以。

祝学习愉快！

收起回答

提问者 EricTaku #1

谢谢你的回复，不过很遗憾，你的回复简单重述了圣杯布局的实现，但是并没有回答我的问题。我的问题是为什么将右边绿色区域的margin-left设置为-220px后，绿色区域就一下进入了container本身区域，覆盖在蓝色的middle区域上，而没有进入container右侧的padding区域呢？

2017-09-21 01:45:09
卡布琦诺回复提问者 EricTaku #2

建议你将代码贴过来，祝学习愉快！

2017-09-21 13:47:01
提问者 EricTaku 回复卡布琦诺 #3

我问的问题不是关于我的代码，而是课程本身的代码。“在处理绿色的right区域的时候，设置了margin-left:-200px，这时绿色区域浮动到container左侧的padding区域中，而设置margin-left:-220px，绿色区域就一下进入了container本身区域”在课程中就是这样演示的。我的问题是“为什么将右边绿色区域的margin-left设置为-220px后，绿色区域就一下进入了container本身区域，覆盖在蓝色的middle区域上，而没有进入container右侧的padding区域呢？”

2017-09-21 18:15:23