圣杯布局、双飞翼布局和等高布局
圣杯布局和双飞翼布局这两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。
虽然两者的实现方法略有差异，不过都遵循了以下要点：
- 两侧宽度固定，中间宽度自适应
- 中间部分在DOM结构上优先，以便先行渲染
- 允许三列中的任意一列成为最高列
- 只需要使用一个额外的
<div>标签
前置知识
-
负margin什么效果？
如果设置的是top和bottom，那么元素会向如图所示的方向移动 如果设置的是right和bottom，元素不会移动，而元素后的内容会随着箭头过来覆盖当前元素
-
margin兼容性
在ie6下，当一个元素的css样式同时设置了float和margin属性的时候 ，将会出现双倍的margin属性值
解决办法：
-
在style中添加：display:inline;
-
在ie6中设置的margin减半，例如（本来是设置margin的值为30px的）：
_margin:15px;/ie6/
“”属性值前面加 :是只有ie6才能认识的符号 ;
为什么会出现双倍间距呢？
这是因为块级元素的默认对象是block,当设置了浮动float的同时，那么他的外部边框就会出现这种情况。什么第二个对象和第一个对象之间就不存在双倍边距的BUG”？因为浮动都有其相对应的对象，只有相对于其父对象的浮动对象才会出现这样的问题。第一个对象是相对父对象的，而第二个对象是相对第一个对象的，所以第二个对象在设置后不会出现问题。另外在一些特殊布局中，可能需要组合使用display:block;和display:inline;才能达到预期效果。
-
圣杯布局
-
DOM结构
<div id="header"></div> <div id="container"> <div id="center" class="column"></div> <div id="left" class="column"></div> <div id="right" class="column"></div> </div> <div id="footer"></div>首先定义出整个布局的DOM结构，主体部分是由
container包裹的center,left,right三列，其中center定义在最前面。 -
CSS代码
假设左侧的固定宽度为200px，右侧的固定宽度为150px，则首先在container上设置：
#container {
padding-left: 200px;
padding-right: 150px;
}
为左右两列预留出相应的空间，得到如下示意图：
随后分别为三列设置宽度与浮动，同时对footer设置清除浮动：
#container .column {
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px;
}
#right {
width: 150px;
}
#footer {
clear: both;
}
得到如下效果：
根据浮动的特性，由于center的宽度为100%，即占据了第一行的所有空间，所以left和right被“挤”到了第二行。
接下来的工作是将left放置到之前预留出的位置上，这里使用负外边距（nagetive margin）：
#left {
width: 200px;
margin-left: -100%;
}
得到：
随后还需要使用定位(position)方法：
#left {
width: 200px;
margin-left: -100%;
position: relative;
right: 200px;
}
这里使用position: relative和right: 200px将left的位置在原有位置基础上左移200px，以完成left的放置：
接下来放置right，只需添加一条声明即可：
#right {
width: 150px;
margin-right: -150px;
}
如果给一个元素设置margin-right为负值，那么后边的元素就会与其发生重叠，等到完全重叠，相当于这个元素没有宽度了，那么这个元素就会上移
得到最终的效果图：
将right移动到预留位置
至此，布局效果完成。不过还需要考虑最后一步，那就是页面的最小宽度：要想保证该布局效果正常显示，由于两侧都具有固定的宽度，所以需要给定页面一个最小的宽度，但这并不只是简单的200+150=350px。回想之前left使用了position: relative，所以就意味着在center开始的区域，还存在着一个left的宽度。所以页面的最小宽度应该设置为200+150+200=550px：
body {
min-width: 550px;
}
综上所述，圣杯布局的CSS代码为：
body {
min-width: 550px;
}
#container {
padding-left: 200px;
padding-right: 150px;
}
#container .column {
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px;
margin-left: -100%;
position: relative;
right: 200px;
}
#right {
width: 150px;
margin-right: -150px;
}
#footer {
clear: both;
}
注意：center是浮动元素，由于浮动具有包裹性，在不显式设置宽度的情况下会自动“收缩”到内容的尺寸大小。如果去掉width: 100%，则当中间栏不包含或者包含较少内容时，整个布局会“崩掉”，而达不到这样的效果。
双飞翼布局
1. DOM结构
<body>
<div id="header"></div>
<div id="container" class="column">
<div id="center"></div>
</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
<div id="footer"></div>
<body>
双飞翼布局的DOM结构与圣杯布局的区别是用container仅包裹住center，另外将.column类从center移至container上。
2. CSS代码
按照与圣杯布局相同的思路，首先设置各列的宽度与浮动，并且为左右两列预留出空间，以及为footer设置浮动清除：
#container {
width: 100%;
}
.column {
float: left;
}
#center {
margin-left: 200px;
margin-right: 150px;
}
#left {
width: 200px;
}
#right {
width: 150px;
}
#footer {
clear: both;
}
得到如下效果示意图：
以上代码将container,left,right设置为float: left，而在container内部，center由于没有设置浮动，所以其宽度默认为container的100%宽度，通过对其设置margin-left和margin-right为左右两列预留出了空间。
将left放置到预留位置：
#left {
width: 200px;
margin-left: -100%;
}
得到：
放置left到预留位置
将right放置到预留位置：
#right {
width: 150px;
margin-left: -150px;
}
得到最终效果：
双飞翼布局最终效果
最后计算最小页面宽度：由于双飞翼布局没有用到position:relative进行定位，所以最小页面宽度应该为200+150=350px。但是当页面宽度缩小到350px附近时，会挤占中间栏的宽度，使得其内容被右侧栏覆盖
因此在设置最小页面宽度时，应该适当增加一些宽度以供中间栏使用（假设为150px），则有：
body {
min-width: 500px;
}
至此双飞翼布局大功告成！其布局整体代码为：
body {
min-width: 500px;
}
#container {
width: 100%;
}
.column {
float: left;
}
#center {
margin-left: 200px;
margin-right: 150px;
}
#left {
width: 200px;
margin-left: -100%;
}
#right {
width: 150px;
margin-left: -150px;
}
#footer {
clear: both;
}
总结与思考
通过对圣杯布局和双飞翼布局的介绍可以看出，圣杯布局在DOM结构上显得更加直观和自然，且在日常开发过程中，更容易形成这样的DOM结构（通常<aside>和<article>/<section>一起被嵌套在<main>中）；而双飞翼布局在实现上由于不需要使用定位，所以更加简洁，且允许的页面最小宽度通常比圣杯布局更小。
其实通过思考不难发现，两者在代码实现上都额外引入了一个<div>标签，其目的都是为了既能保证中间栏产生浮动（浮动后还必须显式设置宽度），又能限制自身宽度为两侧栏留出空间。
从这个角度出发，如果去掉额外添加的<div>标签，能否完成相同的布局呢？答案是肯定的，不过这需要在兼容性上做出牺牲：
DOM结构
<div id="header"></div>
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
<div id="footer"></div>
去掉额外的<div>标签后，得到的DOM结构如上所示，基于双飞翼布局的实现思路，只需要在center上做出修改：
1. 使用calc()
.column {
float: left;
}
#center {
margin-left: 200px;
margin-right: 150px;
width: calc(100% - 350px);
}
通过calc()可以十分方便地计算出center应该占据的自适应宽度，目前calc()支持到IE9。
2. 使用border-box
.column {
float: left;
}
#center {
padding-left: 200px;
padding-right: 150px;
box-sizing: border-box;
width: 100%;
}
使用border-box可以将center的整个盒模型宽度设置为父元素的100%宽度，此时再利用padding-left和padding-right可以自动得到中间栏的自适应宽度。不过需要注意的是，由于padding是盒子的一部分，所以padding部分会具有中间栏的背景色
目前box-sizing支持到IE8。
3. 使用flex
这里使用flex还是需要与圣杯布局相同的DOM结构，不过在实现上将更加简单：
<!-- DOM结构 -->
<div id="container">
<div id="center"></div>
<div id="left"></div>
<div id="right"></div>
</div>
CSS代码如下：
#container {
display: flex;
}
#center {
flex: 1;
}
#left {
flex: 0 0 200px;
order: -1;
}
#right {
flex: 0 0 150px;
}
以上转发自：
https://www.jianshu.com/p/81ef7e7094e8
等高布局
将padding-bottom设置得很大得原因是，主要是为了让背景颜色范围变大，实现伪登高，而通过margin-bottom为padding-bottom得负值，而把元素拉上来，所以说，元素的内容区域其实没变化，但padding把背景颜色统一了，看起来好像范围更大了，然后通过overflow：hidden把外层div变成一个bfc，这样就实现了等高布局。
详细查看：
