用兩種不同的方法來實現一個兩列布局，其中左側部分寬度固定、右側部分寬度隨瀏覽器寬度的變化而自適應變化
首先html裏要有兩個div，而且這兩個div順序左邊先加載，右邊後加載。
<body>
<div class="left">left</div>
<div class="right">right</div>
</body>
css中，設置左邊的div寬度爲100px，兩個div都沒有內容，爲了撐開他們給他們暫時設置同樣的高度100px。
這兩個div要緊密水平靠在一起，想到浮動的方法，因爲浮動有辦法讓後面div緊挨這個浮動元素。那麼給左邊的元素加上左浮動
<style>
body{
margin: 0;
}
.left,.right{
height:100px;
}
.left{
float: left;
width: 100px;
background-color: red;
}
.right{
background-color: #a1cdff;
}
</style>
浮動了left，它脫離了文檔流，right還在文檔流中。但是浮動後還是會佔據文檔流的空間，所以left把right字樣擠到左起100px的地方去了。下面來證明一下：
爲了明顯一點，先是一個寬200px，高100px的div在瀏覽器的樣子
css：
.right{
height:200px;
width:100px;
background-color: #a1cdff;
}
html：<div class="right">right</div>
再放一個浮動的寬100px高100px的div。
css：
.left{
float: left;
height: 100px;
width: 100px;
background-color: red;
}
.right{
height:200px;
width:100px;
background-color: #a1cdff;
}
html：
<div class="left">left</div>
<div class="right">right</div>
沒設置寬度和這個一樣，就是被擋住了，然後浮動的空間還在把內容擠開了看起來就像div兩列，其實是疊在一起了。
而且浮動是讓兩個同樣都浮動着的元素會緊挨，如果寬度不夠會把後面的那個div擠下一行
那如果把兩個div都浮動，右邊無法自適應寬度。
然後我發現之前我對浮動的理解不對，關於浮動，這篇講解得很不錯
http://www.cnblogs.com/zhongxinWang/archive/2013/03/27/2984764.html
高度一致看起來似乎並沒有什麼問題。但是如果left和right高度不相同，右邊div高度改爲200px，就會看出右邊比左邊多出的100像素的高度部分是瀏覽器最左邊開始的。這並不算兩列……了吧
避免重疊纔是這個題目的用意所在吧….
1）margin-left，負邊距
所以讓右邊div右移，加上margin-left，讓右邊藍色的div在left右邊放置。給右邊部分加上margin-left，這個值就是左邊的塊的值，我這裏設置的100px
.right{
height: 200px;
margin-left: 100px;
background-color: #a1cdff;
}
2）BFC
BFC是Block Formatting Context的縮寫…..翻譯成塊級格式化上下文。
首先關於這個概念，看了許多人的文章，查了查資料…..我想這個是不是就是一系列的屬性能夠達到一個共同的效果，有一些共同的規律規則所以取了個名字就叫bfc….
這個BFC區域，用名字直譯過來的一個定義描述就是：
只有Block-level box可以參與創建BFC， 它規定了內部的Block-level Box如何佈局，這個獨立盒子裏的佈局不受外部影響，也不會影響到外面的元素。
這一系列屬性有下列，也就是bfc的條件：
根元素
float屬性不爲none
position爲absolute或fixed
display爲inline-block, table-cell, table-caption, flex, inline-flex
overflow不爲visible
那他們共同的規則就是：
BFC佈局規則：
內部的Box會在垂直方向，一個接一個地放置。
Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
BFC的區域不會與float box重疊。
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
計算BFC的高度時，浮動元素也參與計算
以上關於BFC的引用基本來自於
http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
回到兩列布局中，我們現在的目的是讓右邊那個藍色的right塊在left的左邊放置，解決重疊問題。
左邊已經增加了浮動，那麼就是說它已經觸發了bfc，它現在和右邊塊互相不影響。
規則中一條是這樣：BFC的區域不會與float box重疊。那就讓right塊也加入BFC…..但是要注意的是右邊的寬度是要自適應，像display:inline-block，float：left，雖然不重疊了，但是寬度適應內容了，position：absolute和fixed，寬度適應內容不說，位置還是跑瀏覽器左上角了。像overflow: auto，hidden..都可以
.left{
float: left;
height: 100px;
width: 100px;
background-color: red;
}
.right{
height:200px;
/*overflow: auto;*/
overflow: hidden;
background-color: #a1cdff;
}
這樣就實現了和加margin一樣的效果
那…..知道了bfc，而且加浮動最開始的目的也是因爲錯誤的理解了浮動。現在回頭看一下，加浮動就是把left觸發BFC，那隻要是給左邊類似浮動能脫離文檔流（這樣保證和右邊在同一行，因爲BFC內部的Box會在垂直方向，一個接一個地放置。）的屬性，右邊再消除重疊的都能實現這樣的效果。那就是說給左邊div用position：absolute；替代浮動，然後右邊用margin-left，也可以。甚至把左邊改成固定定位…..當然具體情況要用哪個到時候 再說….
.left{
/*float: left;*/
/*position:fixed;*/
position:absolute;
height: 100px;
width: 100px;
background-color: red;
}
.right{
height:200px;
margin-left: 100px;
background-color: #a1cdff;
}總的來說…這就是一個反覆利用BFC的原理的方法，給左邊一個能脫離文檔流（這樣保證和右邊在同一行，因爲BFC內部的Box會在垂直方向，一個接一個地放置。）的屬性，右邊再通過margin消除重疊，或者在左邊用浮動的情況下，右邊也根據具體情況觸發BFC（BFC的區域不會與float box重疊。）
以上是參考了很多前輩的好文章後自己的總結筆記，如果有問題請回復我指出來好不好嘛…..謝謝