本文主要介绍网页中常用的三栏布局的实现方法。
本文主要参考了下面的文章：
我熟知的三种三栏网页宽度自适应布局方法 -张鑫旭
两栏布局，三栏布局，等高布局，流式布局 -小七
CSS布局——左定宽度右自适应宽度并且等高布局 -w3cplus
八种创建等高列布局要实现的目标是: 左侧固定宽，右侧自适应屏幕宽。
思路：左边浮动，右边加上一个margin-left值，即可实现左边固定，右边自适应布局。
HTML和CSS如下：
两栏布局方法一
<div id="left"></div><div id="content"></div>
点击这里查看Demo
思路：左边绝对定位，右栏使用margin-left实现。
HTML和CSS如下：
两栏布局方法二
<div id="left">左边内容</div><div id="content">主要内容</div>
点击这里查看Demo
思路：利用浮动和负边距实现。
HTML和CSS如下：
两栏布局方法三
<div id="left">左边内容</div><div id="content"> <div id="contentInner">主要内容</div></div>
点击这里查看Demo
边栏在左，主内容在右
HTML和CSS如下：
两栏左右宽度固定布局
<div class="wraper"> <div class="header"> <h1>这是头部文字</h1> </div> <div class="aside sidebar"> <h2>这是侧边栏</h2> </div> <div class="main-content"> <h2>主要内容</h2> </div> <div class="footer"> <h2>这是底部内容</h2> </div></div>
点击这里查看Demo
边栏在右，主内容在左
可以保持上面代码中的HTML结构不变，仅仅可以CSS中侧边栏的浮动方式即可：
两栏左右宽度固定布局2
<div class="wraper"> <div class="header"> <h1>这是头部文字</h1> </div> <div class="aside sidebar"> <h2>这是侧边栏</h2> </div> <div class="main-content"> <h2>主要内容</h2> </div> <div class="footer"> <h2>这是底部内容</h2> </div></div>
点击这里查看Demo
其他实现两列固定宽度布局的方式：
http://www.w3cplus.com/css/layout/fixed-layout/two-columns-2.html
http://www.w3cplus.com/css/layout/fixed-layout/two-columns-3.html要实现的目标是：左中右三栏布局，左右两栏宽度固定(设为200px)，中间宽度自适应。
思路：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用margin值撑开距离。HTML和CSS如下：
三栏布局之绝对定位
<div id="left"></div><div id="main"> <div class="box">中间内容</div></div><div id="right"></div>
点击这里查看Demo
这种方法的缺点在于：如果中间栏含有宽度的内部元素(box)，当浏览器的宽度小于一定程度时，左右两侧的固定栏和中间的box发生层叠。
思路：首先，中间的主体是使用双层标签，外层div宽度100%显示，并且浮动。内层的div为真正的主体内容，含有左右200px的margin值。左栏和右栏都是用margin负值法，左栏左浮动，margin-left为-100%,使左栏的div定位到页面左侧；右栏也是左浮动，其margin-left值负值，大小是本身的宽度200px。
HTML和CSS如下：
三栏布局之margin负值法
<div id="main"> <div id="content">中间内容</div></div><div id="right"></div><div id="left"></div>
点击这里查看Demo
这种方法需要注意的是几个div的顺序， 先是主体部分div，然后再是左右两栏的div。同样存在方法一的不足，当中间栏含有一定宽度的内部块元素时，缩小浏览器窗口左右栏内容和中间块元素重叠。
应用了标签浮动跟随特性，左栏左浮动，右栏右浮动，主体放在后面，可以实现自适应。
这里几个div的顺序关键是主体的div放在后面，左右两栏顺序任意。
HTML和CSS如下：
三栏布局之自身浮动法
<div id="right"></div><div id="left"></div><div id="main"></div>
点击这里查看Demo
这个方法的优点是简洁高效，缺点也很明显，中间栏要避免 clear: both
使用浮动，负边距，和相对定位来实现。优点：
缺点：main需要额外的包装层
HTML和CSS如下：
双飞翼布局
<div id="page"> <div id="head">head</div> <div id="body"> <div class="main"> <div class="main-content">Main-content</div> </div> <div class="Sub">sub</div> <div class="Extra">Extra</div> </div> <div id="foot">Foot</div></div>
先把最重要的main放到前面，并将main占满100%，然后是sub, extra。将三者都采用浮动布局： float:left，利用margin-left: -100%，把sub拉倒最左边，同理用margin-left: -180px将extra放到右侧。这样将sub 和extra定位到正确的位置。然后定位main:给main增加一层包裹，里层的main-content的作用目标是定位main到合适的位置，为此，引入margin。
点击这里查看Demo
圣杯布局和双飞翼布局都是实现两边顶宽，中间自适应的三栏布局，中间栏放在文档流前面优先渲染。两者不同之处在于”中间栏div的内容不被遮挡的实现思路”：
HTML和CSS如下：
圣杯布局
<div id="page"> <div id="header"> This is the Header</div> <div id="container"> <div id="center" class="column" >Main content</div> <div id="left" class="column" >left sidebar </div> <div id="right" class="column" > right sidebar </div> </div> <div id="footer-wrapper"> <div id="footer">This is the footer </div> </div></div>
点击这里查看Demo
HTML和CSS如下：
三栏布局之中间固定
<div id="left"> <div class="inner"></div></div><div id="main"> <div class="inner"></div></div><div id="right"> <div class="inner"></div></div>
点击这里查看Demo
使用这种方法实现的效果不太理想，当浏览器窗口缩小的时候，左右两侧的内容就会被”挤掉”
HTML和CSS如下：
三栏布局之中间固定
<div class="grid"> <div class="col fluid">左侧内容</div> <div class="col fixed">中间</div> <div class="col fluid">右侧内容</div></div>
点击这里查看Demo
用来解决父元素高度自适应高度最大的子元素。只需在浮动元素父元素添加伪类:
.container:after { content: ""; display: block; clear: both;}未完待续。。。
