左中右三栏网页宽度自适应布局方法

三种方法：绝对定位、margin负值、自身浮动。代码简洁实用，无兼容问题。
　　
第一种：绝对定位

demo
div标签的顺序随意，在CSS里都有位置设置，接下来的两个方法对顺序有要求。

如果中间栏或内部元素设置了宽度，浏览器宽度过小的情况下会出现重叠。

 

第二种：margin负值

demo

代码较难理解，有一定抗性——布局不易受内部影响，但一旦出现bug不易排查。

 

第三种：自身浮动

demo

代码简洁高效，但因为使用的浮动属性，所以中间栏要避免使用clear:both

 

最后吐槽下cnblogs，我无法引用codepen的在线演示啊！！！