目录 一列定宽，一列自适应屏幕宽 方法二：position+margin 方法三：float+负margin 左右两栏宽度固定,中间宽度自适应 左右两栏宽度自适应,中间宽度固定 方法一 中间定宽，借助负margin值
本文主要介绍网页中常用的三栏布局的实现方法。
本文主要参考了下面的文章：
我熟知的三种三栏网页宽度自适应布局方法 -张鑫旭
两栏布局，三栏布局，等高布局，流式布局 -小七
css布局——左定宽度右自适应宽度并且等高布局 -w3cplus
八种创建等高列布局 两栏布局 一列定宽，一列自适应屏幕宽 要实现的目标是: 左侧固定宽，右侧自适应屏幕宽。
方法一：float+margin 思路：左边浮动，右边加上一个margin-left值，即可实现左边固定，右边自适应布局。
html和css如下：
两栏布局方法一
html css

点击这里查看demo
方法二：position+margin 思路：左边绝对定位，右栏使用margin-left实现。
html和css如下：
两栏布局方法二 html css
左边内容
主要内容

点击这里查看demo
方法三：float+负margin 思路：利用浮动和负边距实现。
html和css如下：
两栏布局方法三 html css
左边内容
主要内容

点击这里查看demo
两列固定宽度 边栏在左，主内容在右
html和css如下：
两栏左右宽度固定布局 html css
这是头部文字
这是侧边栏
主要内容
这是底部内容


点击这里查看demo
边栏在右，主内容在左
可以保持上面代码中的html结构不变，仅仅可以css中侧边栏的浮动方式即可：
两栏左右宽度固定布局2 html css
这是头部文字
这是侧边栏
主要内容
这是底部内容


点击这里查看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如下：
三栏布局之绝对定位 html css
中间内容

点击这里查看demo
这种方法的缺点在于：如果中间栏含有宽度的内部元素(box)，当浏览器的宽度小于一定程度时，左右两侧的固定栏和中间的box发生层叠。
方法二：margin负值法 思路：首先，中间的主体是使用双层标签，外层div宽度100%显示，并且浮动。内层的div为真正的主体内容，含有左右200px的margin值。左栏和右栏都是用margin负值法，左栏左浮动，margin-left为-100%,使左栏的div定位到页面左侧；右栏也是左浮动，其margin-left值负值，大小是本身的宽度200px。
html和css如下：
三栏布局之margin负值法 html css
中间内容

点击这里查看demo
这种方法需要注意的是几个div的顺序， 先是主体部分div，然后再是左右两栏的div。同样存在方法一的不足，当中间栏含有一定宽度的内部块元素时，缩小浏览器窗口左右栏内容和中间块元素重叠。
方法三：自身浮动法 应用了标签浮动跟随特性，左栏左浮动，右栏右浮动，主体放在后面，可以实现自适应。
这里几个div的顺序关键是主体的div放在后面，左右两栏顺序任意。
html和css如下：
三栏布局之自身浮动法 html css

点击这里查看demo
这个方法的优点是简洁高效，缺点也很明显，中间栏要避免 clear: both
双飞翼布局 使用浮动，负边距，和相对定位来实现。优点：
实现内容和布局的分离 mian部分是自适应宽度的，任何一栏都可以是最高一栏 需要的hack少，在浏览器中兼容性好 缺点：main需要额外的包装层
html和css如下：
双飞翼布局 html css
head
main-content
sub
extra
foot

先把最重要的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的内容不被遮挡的实现思路”：
双飞翼布局如上介绍，是在main的内部又创建div来放置内容，在该div里设置margin-left和margin-right为左右两栏div留出位置。 圣杯布局的实现思路是将div设置padding-left和padding-right后，将左右两个div用相对布局position:relative并配合right和left属性，以便左右两栏div移动后不被遮挡。 html和css如下：
圣杯布局 html css
this is the header
main content
left sidebar
right sidebar
this is the footer

点击这里查看demo
左右两栏宽度自适应,中间宽度固定 方法一 中间定宽，借助负margin值 html和css如下：
三栏布局之中间固定 html css

点击这里查看demo
使用这种方法实现的效果不太理想，当浏览器窗口缩小的时候，左右两侧的内容就会被”挤掉”
方法二 使用flex html和css如下：
三栏布局之中间固定 html css
左侧内容
中间
右侧内容

点击这里查看demo
清除浮动 用来解决父元素高度自适应高度最大的子元素。只需在浮动元素父元素添加伪类:
.container:after { content: ; display: block; clear: both;}
未完待续。。。