布局--三列布局 [左中固定，右侧自适应]三列布局的实现方式。左中固定，右侧自适应。当前使用了5中方式： float+m

三列三列，简明如意，就是左中右布局。其中三列布局主要是两列固定，剩下一列自适应。本文中优先介绍左中两列宽度固定，右侧自适应的方式。固定的宽度依然以 300px为例子

1. margin + float

float 会让盒模型脱离文档流，然后让自适应的列，使用marginLeft 移动开600px就好了。

<style>
    .left {
        width: 300px;
        height: 400px;
        background-color: red;
        float: left; /* **脱离文档流*** */
    }
    .middle {
        width: 300px;
        height: 400px;
        background-color: blueviolet;
        float: left; /* **脱离文档流*** */
    }
    .right {
        height: 400px;
        background-color: yellow;
        margin-left: 600px; /* **将覆盖的移动出来*** */
    }
</style>

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

2. float + overflow

形成BFC，

<style>
    .left {
        width: 300px;
        height: 400px;
        background-color: red;
        float: left; /* **脱离文档流*** */
    }
    .middle {
        width: 300px;
        height: 400px;
        background-color: blueviolet;
        float: left; /* **脱离文档流*** */
    }
    .right {
        height: 400px;
        background-color: yellow;
        overflow: hidden; /* **使用BFC能力*** */
    }
</style>

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

3. table 表格布局

使用display，将元素变为表格类型。

<style>
    .parent {
        width: 100%;/* **必须设置其宽度*** */
        display: table; /* **让内部元素变为table类型*** */
    }
    .left {
        display: table-cell; /* **相当于td*** */
    }
    .middle {
        display: table-cell;
    }
    .right {
        display: table-cell;
    }

</style>

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

注意点：
- 必须给父元素设置宽度。否则自适应的宽度不显示
- 变为table类型后，高度会被拉起，所以设置的height以最高的为准

4. flex布局

使用flex，给父元素设置flex模型，给自适应宽元素设置flex：1

<style>
    .parent {
        display: flex;
    }
    .right {
        flex: 1;
    }

</style>

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

5. grid网格布局

设置网格布局，子元素不用设置宽度，在父元素上使用 grid-template-columns:

<style>
    .parent {
        display: grid;
        grid-template-columns: 300px 300px auto; /* ***** */
    }
    .left {
        height: 400px;
        background-color: red;
    }
    .middle {
        height: 400px;
        background-color: blueviolet;
    }
    .right {
        height: 400px;
        background-color: yellow;
    }
</style>

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

写在最后：在三列布局中，以上是以左中固定，右边自适应为例子来写的。实际开发中，左右固定，中间自适应的布局也不少。这样的布局中，可以使用 position 、grid、float、flex等。其中有两个特别的布局方式：圣杯布局 + 双飞翼布局。下面再分析者两列布局的实现方式和区别