CSS布局--圣杯布局和双飞翼布局

1. 圣杯布局

左右两边大小固定不变，中间宽度自适应。可以用浮动、定位以及flex这三种方式来实现！

<!--html --><div class="main"><div class="left">左边</div><div class="center">中间</div><div class="right">右边</div></div>

1.1 float实现

* {margin: 0;padding: 0;box-sizing: border-box;
}.main {width: 1140px;margin: 0 auto;padding: 0 210px;line-height: 46px;
}.main:after {clear: both;content: " ";display: table;
}.center {float: left;width: 100%;background-color: rgba(0, 0, 0, .1);
}.left {float: left;width: 200px;margin-left: -210px;background: pink;
}.right {float: right;width: 200px;margin-right: -210px;background: blue;
}

1.2 position实现

* {margin: 0;padding: 0;box-sizing: border-box;
}.main {width: 1140px;margin: 0 auto;position: relative;padding: 0 210px;line-height: 46px;
}
.center {width: 100%;background-color: rgba(0, 0, 0, .1);
}.left {position: absolute;left: 0;top: 0;width: 200px;background: pink;
}.right {position: absolute;right: 0;top: 0;width: 200px;background: blue;
}

1.3 flex实现

* {margin: 0;padding: 0;box-sizing: border-box;
}
.main {width: 1140px;margin: 0 auto;line-height: 46px;display: flex;
}
.center {flex:1;background-color: rgba(0, 0, 0, .1);
}.left {flex:0 0 100px;background: pink;
}.right {flex:0 0 100px;background: blue;
}

2. 双飞翼布局

<div class="content"><div class="main"><div class="main-inner">main</div></div><div class="left">left</div><div class="right">right</div>
</div>

* {box-sizing: border-box;
}.main-inner {margin-left: 100px;margin-right: 100px;
}.content {overflow: hidden;width: 1140px;margin: 0 auto;
}.content>div {float: left;
}.main {width: 100%;height: 100px;border: 1px solid red;
}.left {width: 100px;margin-left: -100%;height: 100px;border: 1px solid #000;
}.right {width: 100px;margin-left: -100px;height: 100px;border: 1px solid #000;
}

3. 圣杯布局&双飞翼布局

圣杯布局和双飞翼布局其实解决的问题是相同的，都是解决左右两栏固定宽度，中间部分自适应，其中某部分内容比其他内容高的时候，保证三者元素等高。

区别：圣杯用padding。双飞翼用在main外层多加了一个div然后改用margin。