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

分析：

需要滿足三個要求：

①兩個盒子在同一行

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

③兩個盒子不能重疊

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

組合起來，會有很多種實(shí)現(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%; 
}

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

2、float+BFC：

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

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

增加條件：

如果需要讓重要的內(nèi)容先渲染，即HTML結(jié)構(gòu)應(yīng)該是：

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

如果是這樣的話，第一個盒子的寬度必須是100%，因?yàn)槿绻胍校荒苁莊loat或是display:inline-block
（不考慮絕對定位），這兩種狀態(tài)都需要設(shè)置width:100%來做到自適應(yīng)。

• 浮動：

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

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

所以，如果想用float+margin讓他們不重疊的話，只能再增加一個盒子，為其設(shè)置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，但是他已經(jīng)完全被后面的浮動流蓋住了，所以他無法充當(dāng)
那個"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的話，必須讓當(dāng)前行盒留出大于.left寬度的空隙，
并且讓.left浮動，他們才可以到一行上去。

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

到一行上面之后.main會蓋住.left，這是因?yàn)樵谕粋€堆疊上下文中，inline-block會在float的上面，
所以還需要給.left設(shè)置position:relative讓他顯示出來。

因?yàn)?main已經(jīng)設(shè)置了負(fù)的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; 
}

總結(jié)：

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

 不要求重要內(nèi)容先渲染的話，可以使用：

1.float+margin

2.float+BFC

要求重要內(nèi)容先渲染的話，可以：

1.float+relative

2.float+新盒子

3.inline-block+新盒子

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

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