三欄佈局總結--浮動/絕對/flex/grid網格/table表格/雙飛翼/聖盃

本篇博客所有的代碼均在github上： https://github.com/zuxian/

高度已知，其中左欄、右欄寬度已知，中間自適應

1，浮動佈局

什麼是父元素高度塌陷：
在文檔流中，父元素的高度默認是被子元素撐開的，也就是子元素多高，父元素就多高。但是當子元素設置浮動之後，子元素會完全脫離文檔流，此時將會導致子元素無法撐起父元素的高度，導致父元素的高度塌陷。

浮動佈局的優點：簡單，兼容性也比較好。
浮動佈局的缺點：浮動元素脫離文檔流，要清除浮動，—否則父容器高度塌陷。

2，絕對佈局

絕對定位佈局優點：快捷，設置很方便，而且也不容易出問題。
缺點，容器脫離了文檔流，後代元素也脫離了文檔流，高度未知的時候，這就導致了這種方法的有效性和可使用性是比較差的。

3，flexbox佈局

flexbox的缺點就是IE10開始支持，但是IE10的是-ms形式的。
如果中間部分被內容高度撐開，需要左右欄也撐開----- flex佈局和table佈局

4，grid網格佈局

阮一峯css的grid

• display: grid
  設爲網格佈局以後，容器子元素（項目）的float、display: inline-block、display: table-cell、vertical-align和column-*等設置都將失效。

• 劃分行和列。
  grid-template-columns屬性定義每一列的列寬，grid-template-rows屬性定義每一行的行高，除了使用絕對單位，也可以使用百分比。

• repeat()
  grid-template-columns: repeat(3, 33.33%);
grid-template-columns: repeat(2, 100px 20px 80px);

• auto-fill 關鍵字
  grid-template-columns: repeat(auto-fill, 100px); // 每列寬度100px，然後自動填充，直到容器不能放置更多的列

flexbox是一維佈局，他只能在一條直線上放置你的內容區塊；而grid是一個二維佈局
網格佈局優點： 根據元素按列或行對齊排列
缺點： 兼容性不好。IE10+上支持，而且也僅支持部分屬性。

5，table表格佈局

表格佈局的兼容性很好，在flex佈局不兼容的時候，可以嘗試表格佈局。當內容溢出時會自動撐開父元素。
表格佈局缺陷:
①無法設置欄邊距；
②對seo不友好；
③當其中一個單元格高度超出的時候，兩側的單元格也是會跟着一起變高的。

6，雙飛翼佈局

• 聖盃佈局
  給container設置對應div寬度的padding，三個子div使用float佈局
  左邊div設置margin-left:-100%；left:-左邊div寬度；postion:relative
  右邊div設置margin-left:-右邊div寬度；right:右邊div寬度；postion:relative

• 雙飛翼
  在center這個div中再加了一個div來放置內容，在給這個新的div設置margin-left和margin-right 。

7，聖盃佈局

參考：
https://segmentfault.com/a/1190000016931639