隨便拿一個搜索引擎搜索一下"兩列自適應布局"，都能得到很多種實現(xiàn)方法，
這篇文章的重點是這些方法的底層邏輯是什么，他們是怎么得來的。

分析：

需要滿足三個要求：

①兩個盒子在同一行

②右邊的盒子需要占滿剩下的空間

③兩個盒子不能重疊

這三個條件又分別有很多種實現(xiàn)方法（不考慮絕對定位）：

組合起來，會有很多種實現(xiàn)方式。

方法：

<div class="left"></div> <div class="main"></div>

1、float+block+margin：

.left { 
    float: left; 
    width: 100px; 
} 
.main { 
    margin-left: 110px; 
    width: 100%; 
}

缺點：如果想修改.left的寬度，還需要修改.main 的margin-left。

2、float+BFC：

.left { 
    float: left; 
    margin-right: 10px; 
    width: 100px; 
} 
.main { 
    overflow: hidden; //或overflow：auto 
}

優(yōu)點：可以設置浮動的margin來控制間距，想要修改寬度時只修改寬度就行了。

增加條件：

如果需要讓重要的內容先渲染，即HTML結構應該是：

<div class="main"></div> <div class="left"></div>

如果是這樣的話，第一個盒子的寬度必須是100%，因為如果想要同行，他只能是float或是display:inline-block
（不考慮絕對定位），這兩種狀態(tài)都需要設置width:100%來做到自適應。

• 浮動：

如果.main設置float的話，根據浮動流的原理，要讓.main的右邊出現(xiàn)和.left寬度相同或更多的空隙，
才能讓.left到上面一行來，如果要讓.left貼住.main的左邊線，就要制造出和.main自身相等的空隙，
所以需要給.left設置margin-left:-100%;

這時候.left就疊到了.main的上面。如果給.main設置margin-left: 100px，.left還是會疊在
.main上面，因為這時候.main的寬度變小了，.left的負邊距也變小了，所以不管給
.main的margin-left值設置成多大，.left始終會覆蓋住它。

所以，如果想用float+margin讓他們不重疊的話，只能再增加一個盒子，為其設置margin。即：

<div class="main"> <div class="main-content"></div> </div> <div class="left"></div>

.left { 
    margin-left:-100%; 
    height: 400px; 
    display: inline-block;  /*或者 float:left;*/ 
    width: 100px; 
} 
.main { 
    float: left; 
    width: 100%; 
} 
.main-content { 
    margin-left: 110px; 
}

除此之外還剩下兩條路，一個是float+BFC，一個是position:relative。

先看float+BFC，.main是float，但是他已經完全被后面的浮動流蓋住了，所以他無法充當
那個"float"，顯然他也無法做那個BFC，所以這條路是走不通的。

然后看position:relative。讓.main右移空出.left的位置，然后用relative將其拉出來，即：

.left { 
    margin-left:-100%; 
    position: relative; 
    left: -110px; 
    display: inline-block;  /*或者 float:left*/ 
    width: 100px; 
} 
.main { 
    margin-left: 110px; 
    float: left; 
    width: 100%; 
}

• display:inline-block;

如果讓.main display:inline-block的話，必須讓當前行盒留出大于.left寬度的空隙，
并且讓.left浮動，他們才可以到一行上去。

想讓當前行盒縮短的話，可以給.main設置左邊或是右邊的負邊距，這會有一個副作用，
就是會讓.main向左或向右移動，所以，只能給他設置左邊的負邊距。

到一行上面之后.main會蓋住.left，這是因為在同一個堆疊上下文中，inline-block會在float的上面，
所以還需要給.left設置position:relative讓他顯示出來。

因為.main已經設置了負的margin-left，所以無法給.left讓出空間，position:relative這條路也是沒法走了。
float+BFC顯然也是行不通。

所以只有一種方法：

<div class="main"> <div class="main-content"></div> </div> <div class="left">/div>

.left { 
    float: left; 
    position: relative; 
    width: 100px; 
} 
.main { 
     display: inline-block; 
     margin-left: -100px; 
    width: 100%; 
} 
.main-content { 
    margin-left: 110px; 
}

總結：

從問題出發(fā)，結合基礎的知識點，可以得出以下5種實現(xiàn)方式：

 不要求重要內容先渲染的話，可以使用：

1.float+margin

2.float+BFC

要求重要內容先渲染的話，可以：

1.float+relative

2.float+新盒子

3.inline-block+新盒子

除此之外，還有CSS3的flexbox，他的缺點是不兼容低級瀏覽器并且會出現(xiàn)一些bug。

每個方法都有各自的優(yōu)點和缺點，沒有絕對的好與壞，要使用哪種方式還是要結合具體的需求來決定。