左中右三栏宽度 自适应的常见方法有三种：绝对定位法、margin负值法以及自身浮动法。
1、绝对定位法
这或许是三种方法里最直观、最容易理解的：左右采用绝对定位分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自使用布局。
<body>
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</body>
此方法的优点是：容易理解,上手简单，受内部元素影响而破坏布局的概率低，就是比较经得起折腾。
缺点是：如果中间栏含有最小宽度限制或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发成层重叠的情况。然后，一般情况下，除非用户显示器分辨率>=1600px，否则用户不会把浏览器缩小到1000px一下的，所以该缺陷危害指数3。
2、margin负值法
这种方法是在实际的网站中应用的最多的，个人感觉多少有些跟风的嫌疑。此方法很难用一句话概括。首先，中间的主题是要使用双层标签。外层div宽度100%显示，并且浮动(本例左浮动，下面所述一次为基础)，内层div为真正的主题内容，含有左右210px的margin值。左栏和右栏都是采用margin负值定位的，左栏左浮动，margin-left为-100%，由于前面的div宽度100%于浏览器，所以这里的-100%margin值正好使左栏div定位到了页面的左侧;右侧栏也是左浮动，其margin-left也是负值，大小为其本身的宽度即200px。
<body>
<div class="main">
<div class="main_body"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
此方法：你需要注意几个div的书序，无论是左浮动还是有浮动，先是主体部分div，这是肯定的，至于左右两栏谁先谁后，都无所谓。
优点：三栏交互关联 ，可谓真正意义上的自适应，有一定的抗性 — 布局不易受内部影响。
缺点：相对比较难理解些，上手不容易，代码相对复杂。出现百分比宽度，过多的负值定位，如果出现布局bug，排查不易。
3、自身浮动法
此方法代码最简单。应用了变迁浮动跟随的特性。左栏左浮动，右栏右浮动，主题直接放后面，就实现了自适应。
<body>
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</body>
这里三个div标签的顺序的关键是要把主题div放在最后,左右两栏顺序任意。
有点：代码足够简洁高效
不足：中间主体存在克星，clear:both属性。如果要使用此方法，需避免明显的clear样式。