圣杯布局算是一个“古老”的话题了，关于其来源网上资料众多，在此不多做表述。
但在前几天偶然看到一篇讲解圣杯布局的博客中，有同学对左侧定宽盒子设置 margin-left: 100% 存在疑惑，大致是不清楚为什么这样设置就会使left盒子“爬升”到middle盒子的左侧，想了一下，还是把自己的理解记录下来，希望能帮到有疑惑的同学，文中如有谬误，欢迎指出。
首先设置左右两个div宽度以及container容器的左右内边距分别为left、right盒子的宽度，这是两个盒子的布局位置
效果：
添加浮动
左浮动
效果：
left right盒子移动
负margin的有众多表现行为，在这里我们只讨论脱离了文档流的浮动元素这种情况。
现在我们知道这三个盒子全都脱离了文档流，那么让元素“爬升”至上一行，需要用到负margin，这个负margin是多少呢？这取决于两个条件：
待移动元素的宽度
待移动元素与上一个相邻兄弟元素之间的“空白”空间（宽度）
我们对当前布局做一下临时修改，将right盒子注释，middle盒子修改为如下宽度
现在middle与left之间已经存在了宽为166px的空白空间，
设置margin-left: -10px，你会发现left盒子仍在当前行移动，只不过向左侧移动了10px，接下来设置margin-left: -34px，此时left盒子已经成功上升到第一行了。
效果：
设置-34px后：
然而这是为什么呢？我尝试这样理解：
盒模型=margin + border + padding + content
元素布局是根据每个相邻盒子的属性来决定的，对于设置了浮动的相邻元素而言，它们脱离了正常的文档流，当对一个浮动元素设置负margin时，按照第一条规则来看，元素对应的盒模型实际变小了，负margin的绝对值是多少，即缩小了多少。
本例中我们设置了margin-left:-34px，本质上盒模型宽度较之前减小了34px的宽度，实际的布局宽度变为 200-34=166px，而166像素正是它上一行相邻元素的空白宽度，因此left盒子会“流”到这个为它量身定制的位置，即：left填补了这一块空白空间。
经过一个小栗子讲解，想必大家基本已经明白其中的关键原理，那么我们将测试改动还原回去，继续之前的讲解。
现在思考🤔，left盒子的上一行相邻元素有没有留白？显然是没有的，即留白为0，那么如果想让left盒子像上个例子一样“流到”上一行，其自身盒模型布局宽度需要为0，所以margin设置为-200px，它就上升到了第一行的末端。
接下来让left盒子移动到最左侧，根据上图来看直接移动 x 像素即可，x的宽度是100%，即它们共同的父元素的宽度，left需设置margin-left:-100%即可。
敲黑板！我们现在的假设是left盒子本身就处在上图的位置，但是它不是啊！left本身处在第二行，设置了负margin为自身宽度后才跻身第一行的末端，因此现在设置-100%，它只会到下图的位置：
这比我们预期的位置刚好少一个left自身宽度，对应的css如下：
到这里先停一下，处理下right盒子。
同理上升至第一行，需要设置
效果：
定局
此时left与right分别在container的左右两端（注意，是内侧），我们要让它们最终分布在container外侧，即左右padding处，这两个距离我们可是知道的，接下来设置最后一步，使用绝对定位，一招定乾坤😼
效果：
网友评论