摘要：總結(jié)一下左邊固定，右邊自適應(yīng)的兩欄布局的七種方法。基本的樣式是，兩個相距左側(cè)寬基本的樣式是，兩個盒子相距左側(cè)盒子寬，右側(cè)盒子寬度自適應(yīng)。沒有清除浮動的方法，若左側(cè)盒子高于右側(cè)盒子，就會超出父容器的高度。

總結(jié)一下左邊固定，右邊自適應(yīng)的兩欄布局的七種方法。其中有老生常談的float方法,BFC方法，也有CSS3的flex布局與grid布局。并非所有的布局都會在開發(fā)中使用，但是其中也會涉及一些知識點。關(guān)于最終的效果，可以查看這里

常用的寬度自適應(yīng)的方法通常是利用了block水平的元素寬度能隨父容器調(diào)節(jié)的流動特性。另外一種思路是利用CSS中的calc()方法來動態(tài)設(shè)定寬度。還有一種思路是，利用CSS中的新型布局flex layout與grid layout。

首先創(chuàng)建基本的HTML布局和最基本的樣式。

  

    左邊固定寬度，高度不固定 
 


高度有可能會很小，也可能很大。
  
  

    這里的內(nèi)容可能比左側(cè)高，也可能比左側(cè)低。寬度需要自適應(yīng)。

    基本的樣式是，兩個div相距20px, 左側(cè)div寬 120px
  

基本的樣式是，兩個盒子相距20px, 左側(cè)盒子寬 120px，右側(cè)盒子寬度自適應(yīng)。基本的CSS樣式如下:

.wrapper {
    padding: 15px 20px;
    border: 1px dashed #ff6c60;
}
.left {
    width: 120px;
    border: 5px solid #ffffd;
}
.right {
    margin-left: 20px;
    border: 5px solid #ffffd;
}

下面的代碼都是基于這套基本代碼做覆蓋，通過給容器添加不同的類來實現(xiàn)效果。

.wrapper-inline-block {
    box-sizing: content-box;
    font-size: 0;    // 消除空格的影響
}

.wrapper-inline-block .left,
.wrapper-inline-block .right {
    display: inline-block;
    vertical-align: top;    // 頂端對齊
    font-size: 14px;
    box-sizing: border-box;
}

.wrapper-inline-block .right {
    width: calc(100% - 140px);
}

這種方法是通過width: calc(100% - 140px)來動態(tài)計算右側(cè)盒子的寬度。需要知道右側(cè)盒子距離左邊的距離，以及左側(cè)盒子具體的寬度(content+padding+border)，以此計算父容器寬度的100%需要減去的數(shù)值。同時，還需要知道右側(cè)盒子的寬度是否包含border的寬度。
在這里，為了簡單的計算右側(cè)盒子準(zhǔn)確的寬度，設(shè)置了子元素的box-sizing:border-box;以及父元素的box-sizing: content-box;。
同時，作為兩個inline-block的盒子，必須設(shè)置vertical-align來使其頂端對齊。
另外，為了準(zhǔn)確地應(yīng)用計算出來的寬度，需要消除div之間的空格，需要通過設(shè)置父容器的font-size: 0;,或者用注釋消除html中的空格等方法。
缺點:

需要知道左側(cè)盒子的寬度，兩個盒子的距離，還要設(shè)置各個元素的box-sizing

需要消除空格字符的影響

需要設(shè)置vertical-align: top滿足頂端對齊。

.wrapper-double-float {
    overflow: auto;        // 清除浮動
    box-sizing: content-box;
}

.wrapper-double-float .left,
.wrapper-double-float .right {
    float: left;
    box-sizing: border-box;
}

.wrapper-double-float .right {
    width: calc(100% - 140px);
}

本方案和雙float方案原理相同，都是通過動態(tài)計算寬度來實現(xiàn)自適應(yīng)。但是，由于浮動的block元素在有空間的情況下會依次緊貼，排列在一行，所以無需設(shè)置display: inline-block;，自然也就少了頂端對齊，空格字符占空間等問題。

A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float.

不過由于應(yīng)用了浮動，父元素需要清除浮動。
缺點:

需要知道左側(cè)盒子的寬度，兩個盒子的距離，還要設(shè)置各個元素的box-sizing。

父元素需要清除浮動。

.wrapper-float {
    overflow: hidden;        // 清除浮動
}

.wrapper-float .left {
    float: left;
}

.wrapper-float .right {
    margin-left: 150px;
}

上面兩種方案都是利用了CSS的calc()函數(shù)來計算寬度值。下面兩種方案則是利用了block級別的元素盒子的寬度具有填滿父容器，并隨著父容器的寬度自適應(yīng)的流動特性。
但是block級別的元素都是獨占一行的，所以要想辦法讓兩個block排列到一起。
我們知道，block級別的元素會認(rèn)為浮動的元素不存在，但是inline級別的元素能識別到浮動的元素。這樣，block級別的元素就可以和浮動的元素同處一行了。
為了讓右側(cè)盒子和左側(cè)盒子保持距離，需要為左側(cè)盒子留出足夠的距離。這個距離的大小為左側(cè)盒子的寬度以及兩個盒子之間的距離之和。然后將該值設(shè)置為右側(cè)盒子的margin-left。
缺點：

需要清除浮動

需要計算右側(cè)盒子的margin-left

另外一種讓兩個block排列到一起的方法是對左側(cè)盒子使用position: absolute的絕對定位。這樣，右側(cè)盒子也能無視掉它。

.wrapper-absolute .left {
    position: absolute;
}

.wrapper-absolute .right {
    margin-left: 150px;
}

缺點:

使用了絕對定位，若是用在某個div中，需要更改父容器的position。

沒有清除浮動的方法，若左側(cè)盒子高于右側(cè)盒子，就會超出父容器的高度。因此只能通過設(shè)置父容器的min-height來放置這種情況。

上面的方法都需要通過左側(cè)盒子的寬度，計算某個值，下面三種方法都是不需要計算的。只需要設(shè)置兩個盒子之間的間隔。

.wrapper-float-bfc {
    overflow: auto;
}

.wrapper-float-bfc .left {
    float: left;
    margin-right: 20px;
}

.wrapper-float-bfc .right {
    margin-left: 0;
    overflow: auto;
}

這個方案同樣是利用了左側(cè)浮動，但是右側(cè)盒子通過overflow: auto;形成了BFC，因此右側(cè)盒子不會與浮動的元素重疊。

an element in the normal flow that establishes a new block formatting context (such as an element with "overflow" other than "visible") must not overlap the margin box of any floats in the same block formatting context as the element itself。

這種情況下，只需要為左側(cè)的浮動盒子設(shè)置margin-right，就可以實現(xiàn)兩個盒子的距離了。而右側(cè)盒子是block級別的，所以寬度能實現(xiàn)自適應(yīng)。
缺點:

父元素需要清除浮動

.wrapper-flex {
    display: flex;
    align-items: flex-start;
}

.wrapper-flex .left {
    flex: 0 0 auto;
}

.wrapper-flex .right {
    flex: 1 1 auto;
}

flex可以說是最好的方案了，代碼少，使用簡單。有朝一日，大家都改用現(xiàn)代瀏覽器，就可以使用了。
需要注意的是，flex容器的一個默認(rèn)屬性值:align-items: stretch;。這個屬性導(dǎo)致了列等高的效果。
為了讓兩個盒子高度自動，需要設(shè)置: align-items: flex-start;

又一個新型的布局方式。可以滿足需求，但這并不是它發(fā)揮用處的真正地方。

.wrapper-grid {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: start;
}

.wrapper-grid .left,
.wrapper-grid .right {
    box-sizing: border-box;
}

.wrapper-grid .left {
    grid-column: 1;
}

.wrapper-grid .right {
    grid-column: 2;
}

注意:

grid布局也有列等高的默認(rèn)效果。需要設(shè)置: align-items: start;。

grid布局還有一個值得注意的小地方和flex不同:在使用margin-left的時候，grid布局默認(rèn)是box-sizing設(shè)置的盒寬度之間的位置。而flex則是使用兩個div的border或者padding外側(cè)之間的距離。

最后可以再看一下在父容器極限小的情況下，不同方案的表現(xiàn)。主要分成四種情況：

動態(tài)計算寬度的情況

兩種方案: 雙inline-block方案和雙float方案。寬度極限小時，右側(cè)的div寬度會非常小，由于遵循流動布局，所以右側(cè)div會移動到下一行。

動態(tài)計算右側(cè)margin-left的情況

兩種方案: float+margin-left方案和absolute+margin-left方案。寬度極限小時，由于右側(cè)的div忽略了文檔流中左側(cè)div的存在，所以其依舊會存在于這一行，并被隱藏。

float+BFC方案的情況

這種情況下，由于BFC與float的特殊關(guān)系，右側(cè)div在寬度減小到最小后，也會掉落到下一行。

flex和grid的情況

這種情況下，默認(rèn)兩種布局方式都不會放不下的div移動到下一行。不過 flex布局可以通過 flex-flow: wrap;來設(shè)置多余的div移動到下一行。 grid布局暫不支持。

如果感覺寫的有問題，懇請指出。

本文首發(fā)于我的博客