三列布局的三种方法

自身浮动法

此代码较简单，左栏左浮动，右栏右浮动，主栏内容放在最后，用margin 值为左右的宽度来实现自适应

注意:不浮动的元素要放在浮动元素后面

绝对定位法

此方法与自身浮动法相似，但是使用的是绝对定位，左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主题栏采用左右的margin值来撑开距离

注意:采用浮动的方法时，浮动元素本身会占据其位置（对不浮动的元素来说，都浮动的元素不占据位置，），后面不浮动的元素跟随在后，但是绝对布局不会占据位置，后面的内容会被覆盖

margin负值法

中间的主体使用双层标签，外层内容div宽度100%显示，并且浮动，内层div为真正的主体内容，左栏与右栏采用margin负值定位，左栏左浮动,margin-left值为-100%,右栏也为左浮动，其margin-left值为本身宽度值

原理

主体内容浮动占据100%的位置，后面的元素依次浮动，然后使用margin相应的值来将其调整到本来的位置

转载: 我熟知的三种三栏网页宽度自适应布局方法