三栏布局

一、圣杯布局

使中间的内容先渲染使用了float，relative 相对定位和负值margin；

header,footer{height:50px;}
.wrapper{padding:0 100px;
overflow:hidden;}
.main,.left,.right{float:left;position:relative;}
.main{width:100%;}
.left{width:100px;margin-left:-100%;}
.right{width:100px;margin-left:-100px;}

将left和right两部分装到wrapper 两侧，故名圣杯

<header> Header </header>
  <section class='main'>main</section>
  <aside class='left'>left<aside>
  <aside class='right'>right<aside>
</section>
<footer>footer</footer>

缺陷:如果将浏览器无限变窄，[圣杯]将会[破碎]掉，当main部分的宽度小于left部分就会发生布局混乱

二、双飞翼布局

使中间的内容先渲染，同样使用了float和负值margin，增加了一个层级，并没有使用relative相对定位，而是增加了一个dom结构

header,footer{height:50px;}
.wrapper{padding:0 100px;
overflow:hidden;}
.main,.left,.right{float:left;}
.main{width:100%;}
.main-wrap{margin:0 100px;height:200px;}
.left{width:100px;margin-left:-100%;}
.right{width:100px;margin-left:-100px;}

<header> Header </header>
  <section class='main-wrap'>
<section class='main'>main</section>
</section>
  <aside class='left'>left<aside>
  <aside class='right'>right<aside>
</section>
<footer>footer</footer>

解决了圣杯布局的缺陷，但是增加了一层dom树节点，同时增加了CSS样式规则表和dom树合并成布局树的计算量

三、弹性和模型

header,footer{height:50px;}
.wrapper{display:flex;}
.main{flex:1;}//让中间占据全部位置
.left{flex:0 1 100px;order:-1;}//order控制显示顺序
.right{flex:0 1 120px;order:1;}

flex-grow：放大比例，默认为0-如果存在剩余空间也不放大
flex-shrink：缩小比例，默认为1-如果空间不足项目将缩小
flex-basis：在分配多余空间之前，项目占据的主轴空间

<header> Header </header>
<section class='wrapper'>
  <section class='main'>main</section>
  <aside class='left'>left<aside>
  <aside class='right'>right<aside>
</section>
<footer>footer</footer>

有兼容性问题