布局是 CSS 中一个重要的部分，而三栏式布局在现在的开发中尤为常见。所以，熟悉并掌握三栏式布局是我们学习前端的一门必修课。

1. 定义

三栏式布局，顾名思义就是左右两栏宽度固定，中间栏宽度自适应。（如果你想要左右两栏的宽度不固定，将其宽度值改为百分值即可）

2. 实现方式

三栏式布局的实现方式主要为四种：自身浮动法、绝对定位法、margin 负值法、flex 布局法。

2.1 绝对定位法（position + margin）

原理：通过绝对定位将左右两栏固定，这时左右两栏脱离文档流，中间栏自动流到上方，通过设置外边距给左右两栏腾出空间，中间栏的宽度根据浏览器窗口自适应。
代码及效果如下：

优点：比较直观，易于理解与操作，且 div 的顺序可以任意互换而不影响结果。
缺点：①如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。②由于 absolute 是脱离文档流的，不会影响父元素的高度。所以若三个 div 有父元素包裹，且当左右 div 的高度大于中间 div 的高度时，就会发生「撑破父元素」现象。且这一现象无法用清除浮动来解决。

2.2 自身浮动法（float + margin）

原理：左右两栏分别向左向右浮动，中间栏通过设置外边距给左右两栏腾出空间，中间栏的宽度根据浏览器窗口自适应。
代码及效果如下：

注：书写顺序「先写左右两栏（左右两栏顺序可以互换），再写中间栏」

优点：代码简洁明了，且很容易就能达到想要的效果。
缺点：①当给中间栏设置 clear 属性的时候，会影响布局的实现。②由于 float 属性会使元素脱离文档流，从而不会影响父元素的高度。所以若三个 div 有父元素包裹，且当左右 div 的高度大于中间 div 的高度时，就会发生「撑破父元素」现象。这一状况可以通过清除浮动的方式来解决。（详见 CSS 之清除浮动）。

2.3 margin负值法（float + 负margin）

margin 负值法运用的比较多，它的实现方式又分为两种：圣杯布局和双飞翼布局。

2.3.1 圣杯布局

原理：设置中间栏的宽度为 100%，并使之向左浮动；设置左右栏也向左浮动，通过 margin 来调整左右懒得位置，然后对左右栏添加 position：relative 属性使之相对移动到想要的位置；最后通过对父元素设置 padding 值来达到三栏布局的目的。
代码及效果如下：

注：中间栏一定要放在最前面，左右栏顺序没有限制。

优点：三栏相互关联，可谓真正意义上的自适应，有一定的抗性——布局不易受内部影响。
缺点：①当面板的 middle 部分比左右两边的子面板宽度小的时候，布局就会乱掉。但可以通过设置 middle 的 min-width 属性或使用双飞翼布局避免问题。②由于三栏均为浮动，父元素无法根据三栏的高度而调整自身的高度，所以需要清除浮动来使父元素撑开。

2.3.2 双飞翼布局

原理：为中间栏添加父元素包裹，中间栏通过 margin 撑开父元素，左右栏通过 margin 负值调整其位置来达到三栏布局的目的。
代码及效果如下：

优点：比圣杯布局代码量更少，并解决了圣杯布局 middle 的最小宽度不能小于左侧栏的缺点，自适应效果很好。
缺点：由于三栏均为浮动，父元素无法根据三栏的高度而调整自身的高度，所以需要清除浮动来使父元素撑开。

2.4 flex布局法

CSS3引入了一种新的 display 的方式，即 flex。它能够很好地控制页面的布局，这里暂不讨论，但是也是需要掌握的一个技术点。