左定右定中间自适应布局（圣杯布局）

浮动+margin

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

   .container {
        width: 100%;
        padding: 0 200px;
        box-sizing: border-box;
        overflow: hidden;
    }
    .left,.center,.right {
        float: left;
    }
    .center {
        width: 100%;
        min-height: 300px;
        background: red;
    }
    .left,.right {
        width: 200px;
        min-height: 200px;
        background: blue;
    }
    .left {
        margin-left: -200px;
    }
    .right {
        margin-right: -200px;
    }  
    

  //双飞翼布局
   <div class="container">
        <div class="content">
            <div class="center"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>

   .container::after {
        clear: both;
    }
    .container>div {
        float: left;
        min-height: 300px;
    }
    .content {
        width: 100%;
        background: red;
    }
    .center {
        margin: 0 200px;  
    }
    .left {
        width: 200px;
        background: blue;
        margin-left: -100%;
    }
    .right {
        width: 200px;
        background: blue;
        margin-left: -200px;
    }   

使用calc + float

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

   .container {
       width: 100%;
       overflow: hidden;
    }
    .container>div {
       float: left;
    }
    .left,.right {
        width: 200px;
        background: blue;
        min-height: 200px;
    }
    .center {
        width: calc(100% - 400px);
        background: red;
        min-height: 200px;
    }

flex

    .container {
       width: 100%;
       overflow: hidden;
       display: flex;
    }
    .left,.right {
        flex: 0 0 200px;
        background: blue;
        min-height: 200px;
    }
    .center {
        flex: 1;
        background: red;
        min-height: 200px;
    }

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

position定位

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

    .container {
        position: relative;
    }
    .left,.right {
        width: 200px;
        position: absolute;
        background: blue;
        min-height: 200px;
    }
    .left {
        left: 0px;
    }
    .right {
        right: 0px;
    }
    .center {
        position: absolute;
        left: 200px;
        right: 200px;
        background: red;
        min-height: 200px;
        box-sizing: border-box;
    }
   ```