三栏式布局：左右两栏宽度固定（如果想宽度不固定，将宽度值改为百分值），中间栏宽度自适应
三栏式布局大体上分为四种：自身浮动法、绝对定位法、margin负值法、flex布局法
三栏式布局详细分为五种方法：
float+marginposition+marginfloat+负margin(圣杯布局)
float+负margin(双飞翼布局)
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宽度100%，设置左右两栏的宽度
left设置负左边距为100%，right设置负左边距为负的自身宽度设置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>步骤：三者都设置左浮动
设置wrap宽度为100%，设置左右两个的宽度
left设置负左边距为100%，right设置负左边距为负的自身宽度
设置middle的margin值给两个子面板留出空间。
注：主面板部分优先渲染，圣杯采用的是padding,而双飞翼采用的是margin，解决了圣杯布局middle的最小宽度不能小于左侧栏的缺点。
原版文章：https://zhuanlan.zhihu.com/p/25565751