布局--两列布局所谓两列布局，是布局结构分左右结构。然后左右必然有一列是宽度固定，另外一列是自适应的方式。下面以左侧固定

所谓两列布局，是布局结构分左右结构。然后左右必然有一列是宽度固定，另外一列是自适应的方式。下面以左侧固定[宽度为300px],右侧自适应的方式书写：

1. margin + float

float 会让盒模型脱离文档流，然后下层盒模型向上顶上，同时让其margin偏移就好

<style>
    .left {
        width: 300px;
        height: 400px;
        background-color: red;

        float: left;
    }

    .right {
        height: 500px;
        background-color: yellow;

        margin-left: 300px;
    }
</style>
</head>

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

此种方式存在一个问题：当给自适应的子元素添加清浮动方式：clear:both后，子元素会掉下来

<div class="right">
    <div class="inner"></div>
</div>
<style>
.inner {
    height: 100px;
    background-color: aqua;
    /* 给子元素添加清除浮动后，会掉下来 */
    clear: both;
}
</style>

2. BFC: float + overflow

固定列增加 float，脱离文档流，自适应元素overflow，形成一个隔离容器。

<style>
    .left {
        width: 300px;
        float: left;
    }

    .right {
        overflow: hidden;
    }
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

注意：此处的 overflow:hidden 是形成BFC的一个条件之一，而不是超出隐藏的意思。

3. 表格布局 table-cell

将块级元素，通过 display： table-cell 方式[称为td]，转为表格。

<style>
    #parent {
        display: table;
        width: 100%;
    }
    .left {
        width: 300px;
        height: 400px;
        background-color: red;
        display: table-cell;
    }

    .right {
        height: 400px;
        background-color: yellow;
        display: table-cell;
    }

</style>

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

此处的 parent 必须给定 100%等明显宽度。宽度出现后，才能让自适应的宽度进行展示。否则自适应的元素宽度为0.

4. flex 布局

这种方式，使用了 flex: 1;

<style>
    #parent {
        display: flex;
        width: 100%;
    }
    .left {
        width: 300px;
        height: 400px;
        background-color: red;
    }

    .right {
        height: 400px;
        background-color: yellow;
        flex: 1;
    }

</style>

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

5. 网格 grid 属性

在CSS3中，给出了新的 grid属性，当父级设置 grid的时候，会将子元素变为网格块。然后通过 grid-template-columns 一列宽度控制。

<style>
    #parent {
        display: grid;
        grid-template-columns: 300px auto;
        width: 100%;
    }
    .left {
        height: 400px;
        background-color: red;
    }

    .right {
        height: 400px;
        background-color: yellow;
    }
</style>
<div id="parent">
    <div class="left"></div>
    <div class="right"></div>
</div>

使用 grid 的时候，会将子元素当作网格块，所以固定列的宽度写在 grid-template-columns 中，自适应的给定属性为: auto; 子元素不用设置宽度

以上是左侧固定，右侧自适应的方式。我们也可以将其改为左侧自适应，右侧固定的方式。方法也是相同的。总结以下：

float+margin

float+overflow

table + table-cell

flex

grid