三栏式布局：左右两栏宽度固定（如果想宽度不固定，将宽度值改为百分值），中间栏宽度自适应

三栏式布局大体上分为四种：自身浮动法、绝对定位法、margin负值法、flex布局法

三栏式布局详细分为五种方法：

1. float+margin
2. position+margin
3. float+负margin(圣杯布局)
4. float+负margin(双飞翼布局)
5. flex布局（这里暂时不做介绍）

1、float+margin

原理：左右两栏分别向左向右浮动，中间栏通过外边距给左右两栏腾出空间，中间栏的宽度根据浏览器窗口自适应

.left{
	float:left;
}
.right{
	float:right;
}
.left,.right{
	width:200px;
	background-color:#3F0;
}
.middle{
	margin-left:200px;
	margin-right:200px;
	background-color:#C00;
}

<div class="wrap">
  <div class="left">left</div>
  <div class="right">right</div>
  <div class="middle">middle</div>
</div>

注：要对左右两栏设置宽度、左侧栏添加左浮动，右侧栏添加右浮动。对中间栏设置左右外边距，margin-left的值为左侧栏的宽度，margin-right的值为右侧栏的宽度。

注：书写顺序：先写左右两栏（左右两栏顺序可以变换），再写中间栏（也就是主题栏）

缺点是：先渲染了侧边栏，而不是主题栏。

2、position+margin

原理：通过绝对定位将左右两栏固定，中间栏通过外边距给左右两栏腾出空间，中间栏的宽度根据浏览器窗口自适应

.left{
	left:0;
}
.right{
	right:0;
}
.left,.right{
	width:200px;
	background-color:#3F0;
	position:absolute;
	top:0;
}
.middle{
	margin:0 200px;
	background-color:#C00;
}
<div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>

注：

• 对左右两栏设置宽度，定位方式为绝对定位
• 设置左右两栏的top值为0，左侧栏的left值为0，右侧栏的right值为0。
• 对中间栏设置左右外边距，margin-left的值为左侧栏的宽度，margin-right的值为右侧栏的宽度。

注：如果中间栏含有最小宽度限制或是含有宽度的内部元素，则浏览器串口小到一定程度，主面板与中间栏会发生重叠。

3、float+负margin(圣杯布局)

.middle{
	float:left;
	width:100%;
	background-color:#C00;
}
.left{
	float:left;
	width:190px;
	margin-left:-100%;
	position:relative;
	left:-190px;
	background-color:#0F9;
}
.right{
	float:left;
	width:230px;
	margin-left:-230px;
	position:relative;
	right:-230px;
	background-color:#0F9;
}
.wrap{
	padding:0 230px 0 190px;
}
<div class="wrap">
  <div class="middle">middle</div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>

步骤：

1. 三者都向左浮动
2. 设置middle宽度100%，设置左右两栏的宽度
3. left设置负左边距为100%，right设置负左边距为负的自身宽度
4. 设置middle的padding值给左右两个面板留出空间设置左右两个面板为相对定位，left的left值为负的left宽度，right的right值为负的right宽度。

注：主面板部分优先渲染，当面板的middle部分比左右两边的子面板宽度小的时候，布局就会乱掉。可以通过设置middle的min-width属性或使用双飞翼布局避免问题。

4、双飞翼布局（float+负margin）

.wrap{
    float:left;
	width:100%;
}
.left{
	float:left;
	width:190px;
	margin-left:-100%;
	background-color:#0C0;
}
.right{
	float:left;
	width:230px;
	margin-left:-230px;
	background-color:#0C0;
}
.middle{ 
    margin:0 230px 0 190px;
	background-color:#F00;
}
<div class="wrap">
  <div class="middle">middle</div>
</div>
<div class="left">left</div>
<div class="right">right</div>

步骤：

1. 三者都设置左浮动
2. 设置wrap宽度为100%，设置左右两个的宽度
3. left设置负左边距为100%，right设置负左边距为负的自身宽度
4. 设置middle的margin值给两个子面板留出空间。

注：主面板部分优先渲染，圣杯采用的是padding,而双飞翼采用的是margin，解决了圣杯布局middle的最小宽度不能小于左侧栏的缺点。

原版文章：https://zhuanlan.zhihu.com/p/25565751