圣杯布局中对left盒子设置margin:-100%的一点解释

圣杯布局算是一个“古老”的话题了，关于其来源网上资料众多，在此不多做表述。
但在前几天偶然看到一篇讲解圣杯布局的博客中，有同学对左侧定宽盒子设置 margin-left: 100% 存在疑惑，大致是不清楚为什么这样设置就会使left盒子“爬升”到middle盒子的左侧，想了一下，还是把自己的理解记录下来，希望能帮到有疑惑的同学，文中如有谬误，欢迎指出。

基本布局

<div class = "container">
  <div class = "middle"></div>
  <div class = "left"></div>
  <div class = "right"></div>
</div>

首先设置左右两个div宽度以及container容器的左右内边距分别为left、right盒子的宽度，这是两个盒子的布局位置

//窗口小于一定值时布局会混乱，因此加一个最小宽度
//阈值 = 左width x 2 + 右width
body{
  min-width: 700px; 
}
.container{
  padding: 0 300px 0 200px;
}
.middle{
  width: 100%;
  height: 200px;
  background: #ccc;
}
.left{
  width: 200px;
  height: 200px;
  background: green;
}
.right{
  width: 300px;
  height: 200px;
  background: orange;
}

效果：

添加浮动

左浮动

.middle,.left,.right{
  float: left
}

效果

left right盒子移动

负margin

3. 让left与right“爬升”至第一行

负margin的有众多表现行为，在这里我们只讨论脱离了文档流的浮动元素这种情况。

现在我们知道这三个盒子全都脱离了文档流，那么让元素“爬升”至上一行，需要用到负margin，这个负margin是多少呢？这取决于两个条件：

1. 待移动元素的宽度
2. 待移动元素与上一个相邻兄弟元素之间的“空白”空间（宽度）

我们对当前布局做一下临时修改，将right盒子注释，middle盒子修改为如下宽度:

.middle{
  width: calc(100% - 166px)
}

现在middle与left之间已经存在了宽为166px的空白空间，

设置 margin-left: -10px，你会发现left盒子仍在当前行移动，只不过向左侧移动了10px，接下来设置margin-left: -34px，此时left盒子已经成功上升到第一行了。

效果：

设置-34px后：

然而这是为什么呢？我尝试这样理解：

1. 盒模型=margin + border + padding + content
2. 元素布局是根据每个相邻盒子的属性来决定的，对于设置了浮动的相邻元素而言，它们脱离了正常的文档流，当对一个浮动元素设置负margin时，按照第一条规则来看，元素对应的盒模型实际变小了，负margin的绝对值是多少，即缩小了多少。
3. 本例中我们设置了margin-left:-34px，本质上盒模型宽度较之前减小了34px的宽度，实际的布局宽度变为 200-34=166px，而166像素正是它上一行相邻元素的空白宽度，因此left盒子会“流”到这个为它量身定制的位置，即：left填补了这一块空白空间。

经过一个小栗子讲解，想必大家基本已经明白其中的关键原理，那么我们将测试改动还原回去，继续之前的讲解。

left盒子

现在思考🤔，left盒子的上一行相邻元素有没有留白？显然是没有的，即留白为0，那么如果想让left盒子像上个例子一样“流到”上一行，其自身盒模型布局宽度需要为0，所以margin设置为-200px，它就上升到了第一行的末端。

接下来让left盒子移动到最左侧，根据上图来看直接移动 x 像素即可，x的宽度是100%，即它们共同的父元素的宽度，left需设置 margin-left:-100% 即可。

敲黑板！ 我们现在的假设是left盒子本身就处在上图的位置，但是它不是啊！left本身处在第二行，设置了负margin为自身宽度后才跻身第一行的末端，因此现在设置-100%，它只会到下图的位置：

这比我们预期的位置刚好少一个left自身宽度，对应的css如下：

.left{
    margin-left: -100%
}

到这里先停一下，处理下right盒子。

right盒子

同理上升至第一行，需要设置：

.right{
    margin-left: -300px
}

效果：

定局

此时left与right分别在container的左右两端（注意，是内侧），我们要让它们最终分布在container外侧，即左右padding处，这两个距离我们可是知道的，接下来设置最后一步，使用绝对定位，一招定乾坤😼

.left{
    position: relative;
    left: -200px
}
.right{
    position: relative;
    right: -300px;
}

效果：

至此，整个圣杯布局完成，想必对这些负边距设置值有疑问的同学能清楚点了吧~

本文首发于我的个人博客 Marco's Blog