两栏布局

1、绝对定位方式

<div class="box">
     <style>
         .box {
             position: relative;
         }
         .box > div {
             min-height: 100px;
             position: absolute;
         }
         .left {
             left: 0;
             width: 300px;
             background: red;
         }
         .right {
             left: 320px;
             right: 0;
             background: blue;
         }
     </style>
     <div class="left">left</div>
     <div class="right">
         <p>right</p>
         <p>right</p>
         <p>right</p>
         <p>right</p>
         <p>right</p>
         <p>right</p>
         <p>right</p>
         <p>right</p>
         <p>right</p>
         <p>right</p>
         <p>right</p>
         <p>right</p>
         <p>right</p>
     </div>
 </div>

---

2、网格布局

<div class="box">
    <style>
        .box {
            width: 100%;
            display: grid;
            grid-template-columns: 300px auto;
        }
        .box > div {
            
        }
        .left {
            background: red;
        }
        .right {
            background: blue;
        }
    </style>
    <div class="left">left</div>
    <div class="right">
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
    </div>
</div>

---

3、表格布局

<div class="box">
    <style>
        .box {
            width: 100%;
            display: table;
        }
        .box > div {
            display: table-cell;
        }
        .left {
            width: 300px;
            background: red;
        }
        .right {
            background: blue;
        }
    </style>
    <div class="left">left</div>
    <div class="right">
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
    </div>
</div>

---

4、flex布局

<div class="box">
    <style>
        .box {
            width: 100%;
            display: flex;
        }
        .left {
            width: 300px;
            background: red;
        }
        .right {
            flex: 1;
            background: blue;
        }
    </style>
    <div class="left">left</div>
    <div class="right">
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
    </div>
</div>

---

5、双inline-block

<div class="box">
    <style>
        .box {
            box-sizing: content-box;
            font-size: 0;
        }
        .box > div {
            display: inline-block;
            vertical-align: top;
            box-sizing: border-box;
            min-height: 100px;
            font-size: 14px;
        }
        .left {
            width: 300px;
            background: red;
        }
        .right {
            background: blue;
            width: calc(100% - 300px);
        }
    </style>
    <div class="left">left</div>
    <div class="right">
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
    </div>
</div>

• 这种方法是通过width: calc(100% - 300px)来动态计算右侧盒子的宽度。需要知道右侧盒子距离左边的距离，以及左侧盒子具体的宽度(content+padding+border)，以此计算父容器宽度的100%需要减去的数值。同时，还需要知道右侧盒子的宽度是否包含border的宽度。
• 在这里，为了简单的计算右侧盒子准确的宽度，设置了子元素的box-sizing:border-box;以及父元素的box-sizing: content-box;。
• 同时，作为两个inline-block的盒子，必须设置vertical-align来使其顶端对齐。
• 另外，为了准确地应用计算出来的宽度，需要消除div之间的空格，需要通过设置父容器的font-size: 0;,或者用注释消除html中的空格等方法。

缺点

• 需要知道左侧盒子的宽度，两个盒子的距离，还要设置各个元素的box-sizing
• 需要消除空格字符的影响
• 需要设置vertical-align: top满足顶端对齐。

---

6、左元素float，右元素margin-left

<div class="box">
    <style>
        .box {
            overflow: hidden;
        }
        .box > div {
            
        }
        .left {
            width: 300px;
            background: red;
            float: left;
        }
        .right {
            background: blue;
            margin-left: 320px;
        }
    </style>
    <div class="left">left</div>
    <div class="right">
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
    </div>
</div>

---

7、float + bfc

<div class="box">
    <style>
        .box {
            overflow: hidden;
        }
        .box > div {
            
        }
        .left {
            width: 300px;
            background: red;
            float: left;
        }
        .right {
            background: blue;
            overflow: hidden;
        }
    </style>
    <div class="left">left</div>
    <div class="right">
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
    </div>
</div>

---

8、双float方案

<div class="box">
    <style>
        .box {
            overflow: hidden;
            box-sizing: content-box;
        }
        .box > div {
            float: left;
            box-sizing: border-box;
        }
        .left {
            width: 300px;
            background: red;
        }
        .right {
            background: blue;
            width: calc(100% - 300px);
        }
    </style>
    <div class="left">left</div>
    <div class="right">
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
        <p>right</p>
    </div>
</div>