写一个左中右布局占满屏幕，其中左右两块是固定宽度，中间自适应宽

1.自身浮动

自身浮动法的原理就是对左右分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中。对中间文档流使用margin指定左右外边距进行定位。

优点：受外界影响小

缺点：三个元素的顺序，middle一定要放在最后，middle占据文档流位置，所以一定要放在最后，左右两个元素位置没有关系。当浏览器窗口很小的时候，右边元素会被挤到下一行

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

  *{
        margin: 0;
        padding:0;
    }
     .right{
        width: 200px;
        height: 200px;
        background-color: red;
        float: right;
     }
      .left{
        width: 200px;
        height: 200px;
        background-color: red;
        float: left;
     }
     .middle{
       height: 200px;
       background-color: blue;
       margin: 0 200px;
     }

2.绝对定位

绝对定位法原理是将左右两边使用absolute定位，因为绝对定位使其脱离文档流，后面的middle会自然流动到他们上