三栏布局总结--浮动/绝对/flex/grid网格/table表格/双飞翼/圣杯

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

高度已知，其中左栏、右栏宽度已知，中间自适应

两栏布局参考111

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