三栏布局

首先解释一下什么是“三栏布局”：顾名思义，三栏布局就是在网页上以平铺方式展现的左中右三列布局，其特点在于，左右两列可固定在网页两侧，中间一列永远居中，且当网页宽度大于左右两列宽度之和时，中间一列可随网页整体宽度的变化而变化（简单来说就是两端固定，中间自适应）。

下面围绕的这样的目的，罗列出大约7种解决方法(高度固定)：

浮动布局

浮动布局的优缺点

html代码：

缺点:1. 当宽度小于左右两边宽度之和时，右侧栏会被挤下去；2. html的结构不正确；3.脱离文档流，要处理浮动

优点：比较简单,兼容性好

绝对布局

绝对布局的优缺点

html代码：

缺点：因为布局已经脱离文档流了，意味着下面元素也需要脱离文档流，导致了可用性比较差

优点：快捷

圣杯布局

圣杯布局的优缺点

缺点：当父元素有内外边距时，会导致中间栏的位置出现偏差

优点：兼容目前所有的主流浏览器，包括IE6在内；

双飞翼布局

双飞翼布局的优缺点

缺点：1. 结构不正确 2. 多了一层标签

优点：兼容目前所有的主流浏览器，包括IE6在内；

flex布局

flex布局的优缺点

html代码：

缺点：需要考虑浏览器的兼容性

优点：简单实用，未来的趋势

表格布局

表格布局的优缺点

缺点：无法设置栏间距

优点：兼容性非常好

网格布局

网格布局的优缺点

缺点：兼容性比较差

优点：代码简洁，容易理解