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

分析：

需要滿足三個(gè)要求：

①兩個(gè)盒子在同一行

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

③兩個(gè)盒子不能重疊

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

組合起來(lái)，會(huì)有很多種實(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è)置浮動(dòng)的margin來(lái)控制間距，想要修改寬度時(shí)只修改寬度就行了。

增加條件：

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

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

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

• 浮動(dòng)：

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

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

所以，如果想用float+margin讓他們不重疊的話，只能再增加一個(gè)盒子，為其設(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; 
}

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

先看float+BFC，.main是float，但是他已經(jīng)完全被后面的浮動(dòng)流蓋住了，所以他無(wú)法充當(dāng)
那個(gè)"float"，顯然他也無(wú)法做那個(gè)BFC，所以這條路是走不通的。

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

.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)，他們才可以到一行上去。

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

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

因?yàn)?main已經(jīng)設(shè)置了負(fù)的margin-left，所以無(wú)法給.left讓出空間，position:relative這條路也是沒(méi)法走了。
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é)：

從問(wèn)題出發(fā)，結(jié)合基礎(chǔ)的知識(shí)點(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)是不兼容低級(jí)瀏覽器并且會(huì)出現(xiàn)一些bug。

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