1回答

好帮手慕夭夭

2020-09-28

同学你好，参考如下理解：

本来左中右三个盒子设置左浮动，应该在同一行显示的。但是中间的盒子设置宽度100%，左右两个小盒子被挤到第二行了。所以如果设置间距，让小盒子强制往左移动，就会回到第一行。右侧的盒子right先设置margin-left为-220px（负值为反方向移动），就是往左侧移动220px。

往左侧移动220px之后，就回到了第一行。右侧空白区域是父元素的padding区域，小盒子设置margin是无法移动到padding区域的。

所以又结合定位，设置   right: -220px，让小盒子往右侧移动，覆盖在父元素的padding区域。

圣杯布局比较难理解，可以跟着课程练习一下代码，做完每一步，去浏览器看看实现的效果，会好理解一点。另外，本课程讲解的布局案例在实际开发中是不常用的，简单的练习，作为课外了解即可。

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

0