【呆萌の研究】圣杯布局引发对margin负值的研究

问题の起源

以前一直就听说圣杯布局，但是没有怎么去用过，然后这次偶然接触到了，就学习了一下。
这是一个我从别人写的文章中复制过来的，关于圣杯布局的比较简单的说明

通过缩放页面就可以发现，随着页面的宽度的变化，这三栏布局是中间盒子优先渲染，两边的盒子框子固定不变，即使页面宽度变小，也不影响我们的浏览

而通常是采用浮动布局和margin负值。

一般の实现方法

HTML结构
首先定义一个主体div，再是left和right的div

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

CSS部分
1.给container左边和右边赋上padding值，宽度分别就是能容纳的下left和right的div。
2.main DIV的宽度为100%。
3.main，left和right三个div都设置为左浮动。

完成以上我们就会得到一个这样的结果：

再然后我们给left一个margin-left:100%，此时会发现left移动到了第一行中：

然后面对这个现象，我展开了一系列的思考和探究~

初次の发问

Q：为什么left会跑去了第一行？
A：这个其实我们大概心里是明白的。一开始，main的宽度是100%，所以第一行是无法再容纳后面同样是左浮动的div块。但是通过赋予了margin-left为-100%，这里的100%也就是父容器的宽度，浏览器计算出来是一个负值，就认为它能被容纳在第一行。

继续试验

我们可以尝试改变margin-left的值，去看看div位置的变化。为了方便我们计算，另外写了一个类似的布局，内容区的宽度是100px，三个div的宽度也都是100px。
HTML部分

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

CSS部分

.container{
  width:100px;
  margin:0;
  padding:0 100px;
  background:rgba(0,0,0,.3);
}

div{
  float:left;
  width:100px;
  height:100px;
}
.main{
  background:rgba(0,0,255,.4);
}
.left{
  background:rgba(233,0,0,.4);
}
.right{
  background:rgba(0,233,0,.4);
}

效果是这样的

然后我们试着给left赋予不同的margin-left负值，会发现：
1.当margin-left在0px ~ -99px的时候，left会向左移动。

2.当margin-left为-100px的时候，left上移动，与main重叠：

所以margin-left是-100px的时候，显然是一个分界点。

3.当margin-left的负值继续增加，left又会继续向左边移动：

根据上面的情况，加以本宝宝的百度（笑），我们确定了想法，就是在计算元素的"宽度"的时候是会把margin-left+width得到结果，当-100px+100px=0px的时候，就被认为第一行是还可以容纳的下，所以第二行的元素就到了第一行。
此时，我还找到了一篇文章，这篇文章比较合理的阐述了移动的原理：https://www.cnblogs.com/LiveW...

二次の提问

然而这里还有一个细节问题，就是left的移动其实是有一个范围的：

画了红框的范围是container的一个padding区域，在left移动切换的时候，
当left的margin-left并没有达到-100px的时候，为什么它会向左移动，单纯从放不下的原理来说，它在原处不动也可以是一个合理的现象，那篇文章似乎也没有提到合理的原因，然后我继续试验。

再次实验

我们从当left的margin-left为-100px开始，即main和left重叠的情况。
我们再给main一个margin-left负值为-50px，结果main和left一起向左边移动：

再试验一种情况，把left的宽设为150px，margin-left设为-150px，main的margin-left是0，此时left的右边对齐了main的右边。

所以应该隐隐约约可以发现了些什么...

我の小结论

合理的解释就是，在摆放元素位置的时候，它会计算出那个右边的值，并且会认为这就是元素的最后的标准线。

1.解释继续实验中为什么margin-left为left宽度负值，left会和main重叠：
因为它会被认为宽度是0，所以从main的结束位置开始计算是100px+0px，所以元素要以100px为结束线，也就是它在100px的左边。

2.解释再次实验中为什么更改main的margin-left，left会和它一直重叠：
根据1的推断，left的边界线计算结果一直都会是main的边界线。

3.解释为什么left能在第二行向左边移动：
因为它会被认为宽度在1px~99px之间，所以它的边界线是在内容区中宽度为1px~99px之间，所以它能移动。

其实也是我自己的猜想和推论，并不知道实际情况对不对QAQ，但是根据自己的测试情况来说，目前是都说得通的，望大神指点嘻嘻。