多列自适应布局

多列布局是从两列布局引申出来的，所以我们先来看两列布局

两列布局：定宽 + 自适应

HTML结构如下所示：

<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>r-left</p>
        <p>r-right</p>
    </div>
</div>

这里的left是定宽，right自适应

1. float + margin

.left {
    float: left;
    width: 100px;
}
.right {
    margin-left: 120px; /* 留出一部分空隙 */
}

• 优点：兼容性较好，代码简单，IE6不支持
• 缺点：如果需要在right部分的第一个p上设置clear：bothright中的文字会整体下移，解决这个问题可以用下面的方法

2. float-fix

我们需要变动一下上面的html结构，在right外套一个div

<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right-fix">
        <div class="right">
            <p>r-left</p>
            <p>r-right</p>
        </div>
    </div>
</div>

.right-fix {
    float: right;
    width: 100%;
    margin-left: -100px;
}
.left {
    float: left;
    width: 100px;
    position: relative;
}
.right {
    margin-left: 120px;
}

这里我们让right-fix右浮动，这时会使left和right-fix处于一个层上。指定width:100%让right充满父元素，这时right-fix会在left的下方。所以我们需要再指一个负的margin-left让right-fix覆盖在left上面。同时right指定margin-left抵消掉right-fix设置的负的margin。为了让left显示在最上面，需要给left指定一个position: relative。真是够麻烦的。。。

3. float + overflow

.left {
    float: left;
    width: 100px;
    margin-right: 20px;
}
.right {
    overflow: hidden;
}

给一个块元素设置了overflow: hidden会触发该块元素的BFC(Block Formating Context)模式。在这里，right块就不会紧贴着它的父元素的左边框了。所以它会和left左右依次排列。
- 优点：兼容性好，只有IE6不支持。设置也比较简单。

4. table

.parent {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.left, .right {
    display: table-cell;
}
.left {
    width: 100px;
    padding-right: 20px;
}

这种方式采用了表格布局。table-cell布局的元素会左右依次排列。
- 给parent设置width: 100%是因为默认表格布局的宽度是子元素的宽度。
- table-layout属性可以提高渲染速度，以布局优先的原则
- 由于table-cell布局的元素没法设置margin，所以边距需要设置padding

5. flex

.parent {
    display: flex;
}
.left {
    width: 100px;
    margin-right: 20px;
}
.right {
    flex: 1;
}

给right设置flex: 1是同时设置了flex-grow和flex-shrink都设置为1，这样以达到自适应。
- 优点：设置简单，容易理解
- 缺点：flex的兼容问题，性能问题

多列布局：两列定宽 + 自适应

HTML结构如下所示：

<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="center">
        <p>center</p>
    </div>
    <div class="right">
        <p>right</p>
    </div>
</div>

• 多列布局可以由两列布局引申而来
• 上面两列布局的方法中，第一二种由于清除浮动和复杂性的原因，这里不推荐使用
• 这里只介绍上面的第三种方法，第四种和第五种方法可以类推使用

float + overflow

.left, .center {
    float: left;
    width: 100px;
    margin-right: 20px;
} 
.right {
    overflow: hidden;
}

两列布局：不定宽 + 自适应

HTML结构如下所示：

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

和定宽加自适应布局类似，不过这里的left不知道宽度
不定宽+自适应布局可以由上面介绍的定宽+自适应布局引伸过来。这里需要分析的地方使第二列的样式是否与第一列的宽度有耦合性。分析如下：
- float+margin/float-fix两种方法第二列需要设置margin，而margin的值是根据第一列的宽设定的，所以具有强耦合性，因而不能实现
- 同理float+overflow可以实现
- table布局可以实现，但同时需要注意
+ .parent中去掉table-layout样式。table-layout是布局优先，而现在是不定宽。
+ left中添加width: 0.1%，设置此主要是为了兼容性考虑
代码如下:

.parent {
    display: table;
    width: 100%;
}
.left, .right {
    display: table-cell;
}
.left {
    width: 0.1%;
    padding-right: 20px;
}

• flex可以实现

多列布局：多列不定宽 + 自适应

HTML结构如下所示：

<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="center">
        <p>center</p>
    </div>
    <div class="right">
        <p>right</p>
    </div>
</div>

• 同理，这里的布局方式也可以从不定宽+自适应方式引申而来。
• 上面提到的方法中，float+overflow, table, flex都可以实现

1. float + overflow

.left,.center {
    float: left;
    margin-right: 20px;
}
.right {
    overflow: hidden;
}

/* p的宽度即是内容的宽度 */
.left p,.center p {
    width: 100px;
}

2. table

.parent {
    display: table;
    width: 100%;
}
.left,.center,.right {
    display: table-cell;
}
.left,.center {
    width: 0.1%;
    padding-right: 20px;
}
.left p,.center p {
    width: 100px;
}

3. flex

.parent {
    display: flex;
}
.left,.center {
    margin-right: 20px;
}
.right {
    flex: 1;
}
.left p,.center p {
    width: 100px;
}