CSS两栏/三栏布局实现

两栏布局（左侧定宽，右侧自适应）

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

方式一：浮动

        div {
            height: 200px;
        }

        .box {
            overflow: hidden;  /*添加BFC*/
        }

        .left {
            width: 200px;
            float: left;
            background-color: orange;
        }

        .right {
            margin-left: 200px;
            background-color: orangered;
        }

方式二：flex布局

        div {
            height: 200px;
        }

        .box {
            display: flex;
        }

        .left {
            width: 200px;
            background-color: orange;
        }

        .right {
            flex: 1;
            background-color: orangered;
        }

方式三：绝对定位

        div {
            height: 200px;
        }

        .box {
            position: relative;
        }

        .left {
            width: 200px;
            background-color: orange;
        }

        .right {
            position: absolute; /*子绝父相*/
            left: 200px;
            top:0;
            right:0;
            background-color: orangered;
        }

方式四：grid布局

        .box {
            display: grid;
            grid-template-rows: 200px; /*行高*/
            grid-template-columns: 200px auto; /*列宽*/
        }

        .left {
            background-color: orange;
        }

        .right {
            background-color: orangered;
        }

三栏布局（左右定宽，中间自适应）

    <!--方式一的html结构-->
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>
    <!--方式二、三、四的html结构-->
    <div class="box">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
    <!--圣杯的html结构-->
    <div class="box">
        <div class="center"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <!--双飞翼的html结构-->
    <div class="center">
        <div class="center-wrapper"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>

方式一：浮动

        div {
            height: 200px;
        }

        .box {
            overflow: hidden;
        }

        .left {
            background-color: orange;
            float: left;
            width: 200px;
        }

        .center {
            background-color: yellow;
            margin-left: 200px;
            margin-right: 200px;
        }

        .right {
            background-color: orangered;
            float: right;
            width: 200px;
        }

方式二：flex布局

        div {
            height: 200px;
        }

        .box {
            display: flex;
        }

        .left {
            background-color: orange;
            width: 200px;
        }

        .center {
            background-color: yellow;
            flex: 1;
        }

        .right {
            background-color: orangered;
            width: 200px;
        }

方式三：绝对定位

        div {
            height: 200px;
        }

        .box {
            position: relative;
        }

        .left {
            position: absolute;  /*子绝父相*/
            top: 0;
            left: 0;
            width: 200px;
            background-color: orange;
        }

        .center {
            background-color: yellow;
            margin-left: 200px;
            margin-right: 200px;
        }

        .right {
            position: absolute;  /*子绝父相*/
            top: 0;
            right: 0;
            width: 200px;
            background-color: orangered;
        }

方式四：grid布局

        .box {
            display: grid;
            grid-template-columns: 200px auto 200px; /*列宽*/
            grid-template-rows: 200px; /*行高*/
        }

        .left {
            background-color: orange;
        }

        .center {
            background-color: yellow;
        }

        .right {
            background-color: orangered;
        }

圣杯布局：三栏布局的一种，中间栏内容在最前面，实现优先加载

        div {
            height: 200px;
        }

        .box {
            padding: 0 200px; /*留出左右盒子的宽度*/
        }

        .left {
            float: left;
            width: 200px;
            margin-left: -100%; /*实现左盒子不换行*/
            position: relative;
            left: -200px; /*定位实现左盒子放置左侧*/
            background-color: orange;
        }

        .center {
            float: left;
            width: 100%;
            background-color: yellow;
        }

        .right {
            float: left;
            width: 200px;
            margin-right: -200px; /*实现右盒子不换行+右盒子放置右侧*/
            background-color: orangered;
        }

双飞翼布局：三栏布局的一种，中间栏内容在最前面，实现优先加载，与圣杯布局的区别在于实现方式不同

        div {
            height: 200px;
        }

        .center {
            width: 100%;
            float: left;
            background-color: yellow;
        }

        .left {
            float: left;
            width: 200px;
            margin-left: -100%; /*实现左盒子不换行*/
            background-color: orange;
        }

        .center-wrapper {
            margin-left: 200px; 
            margin-right: 200px; /*在中间盒子内部留下左右盒子空间*/
        }

        .right {
            float: left;
            width: 200px;
            margin-left: -200px; /*实现右盒子不换行*/
            background-color: orangered;
        }