兩列自適應布局方案整理

前提

本文討論的是兩列自適應布局：左列定寬/不定寬，右列自適應。

雖然分這兩種情況，但實際上不定寬的方案同樣適用于定寬的場景，因此不定寬的方案泛用度更高。

左列定寬，右列自適應

margin + float

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

    .left{
        float: left;     //向左浮動
        width: 100px;    //固定寬度
        position: relative;//由于.left與.right-fix重合，且.right-fix在DOM樹上的位置比.left要后，因此.right-fix會遮擋住.left，設置.left為relative可以讓其冒出來。
    }
    .right-fix{
        float: right;     //向右浮動
        width: 100%;    //為了自適應設為100%
        margin-left: -100px;//由于寬度設為100%，.right-fix遭到瀏覽器換行處理；因此通過設置負的margin值，在左側制造出100px的空白，使.right-fix與.left重合（即處于同一行）
    }
    .right{
        margin-left: 120px;    //由于.left和.right-fix重合了，因此給.right設置一個margin-left，避免內容區（.right）與.left重合。另外，120px - 100px = 多出來的20px實際上就相當于.left和.right之間的間隔了。
    }

這個方法其實已經是兼顧到低版本IE的完善版本了，缺點是代碼冗長，而且有兩個關鍵知識點比較難理解：

1. 給.left加上position:relative;怎么就能讓.left冒出來而不受.right-fix的遮擋了呢？

2. .right-fix設置負的margin-left，怎么就能使.left與.right-fix重合了呢？

再者，這個方案由于.right-fix的margin-left和.left的width高度耦合，因此無法實現自適應，只能應用在左列（當然右列也成）固定寬度的場景。

左列不定寬，右列自適應

float + BFC

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

.left{
    float: left;
    width: 100px;
    margin-right: 20px;    //形成20px的間隔
}
.right{
    overflow: hidden; //通過設置overflow: hidden來觸發BFC特性
}

這個方法主要是應用到BFC的一個特性：

1. 浮動元素的塊狀兄弟元素會無視浮動元素的位置，盡量占滿一整行，這樣該兄弟元素就會被浮動元素覆蓋。

2. 若浮動元素的塊狀兄弟元素為BFC，則不會占滿一整行，而是根據浮動元素的寬度，占據該行剩下的寬度，避免與浮動元素重疊。

3. 浮動元素與其塊狀BFC兄弟元素之間的margin可以生效，這將繼續減少兄弟元素的寬度。

table布局

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

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

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

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