隨便拿一個搜索引擎搜索一下“兩列自適應布局”，都能得到很多種實現方法，這篇文章的重點是這些方法的底層邏輯是什么，他們是怎么得來的。
分析：
需要滿足三個要求：
①兩個盒子在同一行
②右邊的盒子需要占滿剩下的空間
③兩個盒子不能重疊
這三個條件又分別有很多種實現方法（不考慮絕對定位）：
組合起來，會有很多種實現方式。
方法：
<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 }
優點：可以設置浮動的margin來控制間距，想要修改寬度時只修改寬度就行了。
增加條件：
如果需要讓重要的內容先渲染，即HTML結構應該是：
<div class="main"></div> <div class="left"></div>
如果是這樣的話，第一個盒子的寬度必須是100%，因為如果想要同行，他只能是float或是display:inline-block（不考慮絕對定位），這兩種狀態都需要設置width:100%來做到自適應。
- 浮動：
如果.main設置float的話，根據浮動流的原理，要讓.main的右邊出現和.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; }
總結：
從問題出發，結合基礎的知識點，可以得出以下5種實現方式：
不要求重要內容先渲染的話，可以使用：
1.float+margin
2.float+BFC
要求重要內容先渲染的話，可以：
1.float+relative
2.float+新盒子
3.inline-block+新盒子
除此之外，還有CSS3的flexbox，他的缺點是不兼容低級瀏覽器並且會出現一些bug。
每個方法都有各自的優點和缺點，沒有絕對的好與壞，要使用哪種方式還是要結合具體的需求來決定。
轉自轉自http://www.cnblogs.com/LiveWithIt/p/5965605.html