效果图

一、flex弹性布局

    <style>
        .container{
            display: flex;
        }
        .left{
            /* flex:0 0 100px; 不扩展、不收缩、固定宽度100px*/
            height: 400px;
            background: rgb(148, 145, 132);
            flex:0 0 100px;
        }
        .right{
            height: 400px;
            background: rgb(148, 145, 132);
            flex:0 0 100px;
        }
        .middle{
            /* flex:auto; 等同于 flex:1 1 auto */
            background: rgb(233, 230, 232);
            flex: auto;
        }
    </style>

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

二、float浮动布局

浮动布局有两个重要的地方：

1. HTML结构中的顺序是左侧、右侧、中间。（左中由顺序下，右侧的将会被挤到下一行）
2. CSS样式中middle模块，要设置左右margin宽度为左右固定列宽度，否则中间模块会占据整个父容器覆盖左右固定列

    <style>
        .container{
            height: 400px;
        }
        .left{
            /*float: left;左浮动 */
            background: yellow;
            width: 100px;
            height:inherit;
            float: left;
        }
        .right{
            /* float: right;右浮动 */
            background: yellow;
            width: 100px;
            height:inherit;
            float: right;
        }
        .middle{
         /* 这里一定要设置左右边距 */
            height: inherit;
            background: yellowgreen;
            margin-left: 100px;
            margin-right: 100px;
        }
    </style>

这里一定要注意顺序是左、右、中

    <div class="container" >
        <!-- 这里注意顺序左、右、中 -->
        <div class="left"></div>
        <div class="right"></div>
        <div class="middle"></div>
    </div>

三、position定位布局

    <style>
        .container{
            /* 包裹三列的这个大容器要设置相对定位 */
            position: relative;
            height: 400px;
        }
        .left{
            width: 100px;
            height: inherit;
            background: rgb(83, 206, 34);
            position: absolute;
        }
        /* 中间绝对定位，并且留出左右固定列的宽度，否则两侧的内容会被覆盖 */
        .middle{
            height: inherit;
            background: goldenrod;
            position: absolute;
            left:100px ;
            right: 100px;
        }
        .right{
            /* 右侧绝对定位要指定距父容器右侧的宽度为0，实现靠右 */
            width: 100px;
            height: inherit;
            background: rgb(83, 206, 34);
            position: absolute;
            right: 0;
        }
    </style>

    <div class="container">
        <div class="left">左侧</div>
        <div class="middle">中间</div>
        <div class="right">右侧</div>
    </div>

四、grid网格布局

    <style>
        /* grid-template-columns:200px auto 200px;
            定义网格容器的为3列，分别是200px、自动、200px
         */
        .container{
            height:400px;
            display: grid;
            grid-template-columns:200px auto 200px;
        }
        .left{
            background: rgb(248, 166, 42);
        }
        .right{
            background: rgb(248, 166, 42);
        }
        .middle{
            background: rgb(236, 229, 127);
        }
    </style>

    <div class="container">
        <div class="left">左侧固定列宽200px</div>
        <div class="middle">中间自适应</div>
        <div class="right">右侧固定列宽200px</div>
    </div>