【呆萌の研究】聖盃佈局引起對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，可是根據本身的測試狀況來講，目前是都說得通的，望大神指點嘻嘻。