三栏式布局

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

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

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

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

1、float+margin

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

[css] view plain copy

1. .left{  
2.     float:left;  
3. }  
4. .right{  
5.     float:right;  
6. }  
7. .left,.right{  
8.     width:200px;  
9.     background-color:#3F0;  
10. }  
11. .middle{  
12.     margin-left:200px;  
13.     margin-right:200px;  
14.     background-color:#C00;  
15. }  

[html] view plain copy

1. <div class="wrap">  
2.   <div class="left">left</div>  
3.   <div class="right">right</div>  
4.   <div class="middle">middle</div>  
5. </div>  

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

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

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

2、position+margin

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

[html] view plain copy

1. .left{  
2.     left:0;  
3. }  
4. .right{  
5.     right:0;  
6. }  
7. .left,.right{  
8.     width:200px;  
9.     background-color:#3F0;  
10.     position:absolute;  
11.     top:0;  
12. }  
13. .middle{  
14.     margin:0 200px;  
15.     background-color:#C00;  
16. }  
17. <div class="left">left</div>  
18. <div class="middle">middle</div>  
19. <div class="right">right</div>  

注：

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

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

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

[html] view plain copy

1. .middle{  
2.     float:left;  
3.     width:100%;  
4.     background-color:#C00;  
5. }  
6. .left{  
7.     float:left;  
8.     width:190px;  
9.     margin-left:-100%;  
10.     position:relative;  
11.     left:-190px;  
12.     background-color:#0F9;  
13. }  
14. .right{  
15.     float:left;  
16.     width:230px;  
17.     margin-left:-230px;  
18.     position:relative;  
19.     right:-230px;  
20.     background-color:#0F9;  
21. }  
22. .wrap{  
23.     padding:0 230px 0 190px;  
24. }  
25. <div class="wrap">  
26.   <div class="middle">middle</div>  
27.   <div class="left">left</div>  
28.   <div class="right">right</div>  
29. </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）

[html] view plain copy

1. .wrap{  
2.     float:left;  
3.     width:100%;  
4. }  
5. .left{  
6.     float:left;  
7.     width:190px;  
8.     margin-left:-100%;  
9.     background-color:#0C0;  
10. }  
11. .right{  
12.     float:left;  
13.     width:230px;  
14.     margin-left:-230px;  
15.     background-color:#0C0;  
16. }  
17. .middle{   
18.     margin:0 230px 0 190px;  
19.     background-color:#F00;  
20. }  
21. <div class="wrap">  
22.   <div class="middle">middle</div>  
23. </div>  
24. <div class="left">left</div>  
25. <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