三栏布局问题

1. 绝对定位法
   左右两栏采用绝对定位，分别固定在页面的两侧，中间的主体栏用左右margin值撑开距离
   Tips
   左右position均为absolute，左边left=0,右边right=0,top=0,中间栏的margin-left为左边宽度，margin-right为右边宽度

      .left{
            width:100px;
            height: 500px;
            background-color: #8E8DCC;
            position: absolute;
            left:0
        }
        .right{
            width: 200px;
            height: 500px;
            background-color: antiquewhite;
            position: absolute;
            right:0;
            top:0
        }
        .main{
            margin-left:100px;
            margin-right:200px;
            height: 500px;
            background-color: #999999;
        }

<div class="left"></div>
<div class="main"></div>
<div class="right"></div>

2. margin负值法
   中间栏要用<div>再包裹一层，并且宽度为100%，设置浮动float：left
   中间栏则要设置margin值
   左右栏设置浮动float:left，并且设置magin值为负,左边栏margin-left：-100%，右边栏margin-left:自身宽度

       .center{
            float: left;
            width: 100%;
        }
        .main{
            margin-left:100px;
            margin-right:200px;
            height: 500px;
            background-color: #999999;
        }
        .left{
            width:100px;
            height: 500px;
            background-color: #8E8DCC;
            margin-left: -100%;
            float:left;
        }
        .right{
            width: 200px;
            height: 500px;
            background-color: antiquewhite;
            margin-left:-200px;
            float:left;
        }

<div class="center">
    <div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>

3. 自身浮动法
   左栏左浮动，右栏右浮动，把主体放最后

       .left{
            float: left;
            width: 100px;
            height: 500px;
            background-color: #8E8DCC;
        }
        .right{
            float: right;
            width: 200px;
            height: 500px;
            background-color: antiquewhite;
        }
        .main{
            height: 500px;
            background-color: #999999;
        }

<div class="left"></div>
<div class="right"></div>
<div class="main"></div>