面試的時候真的太常被面到這個問題了！
所以還是實踐一下做個筆記吧。
html布局如下：
class="content">
class="left">
hellop>
i'am leftp>
div>
class="right">
hip>
i'am rightp>
div>
div>
body>若不做任何操作，其樣式為
左邊固定為200px
可以看到這個的右邊根本沒有自適應
所以在right要right：0;，就是同時設定left和right達到自適應的效果
bfc布局有說明：bfc區域不會與float box重疊
所以，left這裡為float box，使用overflow：hidden;來觸發bfc，這樣right就不會與left重疊啦。
這個和上面類似，只是float和position都不太適用了。所以還是使用bfc和flex吧。
html如下：
class="content">
class="main">
中間自適應區域
div>
class="left">
i'am leftp>
div>
class="right">
i'am rightp>
div>
div>
body>css
*.content
.main
.left
.right
有幾點需要注意一下：
1. 中間自適應的區域在結構上要放在left和right之上。
2. content（即包裹在最外面的那一層div）他必須是box-sizing：border-box。因為只有這樣在後面設定其padding值時，他才會把內容裡面的三個div全部擠進來而不是擴充出去。
3. 負margin的使用原理是對float元素移動到上面。left的margin-left設定為-100%得到的值是-父元素的寬度，即left將會跑到main的左邊。right設定為-200px則是讓right移動到main的右邊。但同時，由於float屬性他們會擋住main的顯示。
4. 於是需要使用position定位，將left和right分別定位到最左端和最右端。
效果圖如下：
兩列布局效果：
聖杯布局的確是比上面所述的幾種方法要好多了~
表示感謝~~
雙飛翼布局相對與聖杯布局來說就更簡單了。根本不需要用到position:relative
html如下：
class="content">
class="main">
class="main_content">
中間自適應
div>
div>
class="left">
i'am leftp>
div>
class="right">
i'am rightp>
div>
div>
body>css：
*.content
.main
.main_content
.left
.right
有幾點要注意：
1. margin是在main的內部的div下設定的。
2. 沒了。
效果圖如下：
效果和聖杯布局一模一樣，但是在理解上則更加簡單。
多種方式實現兩列布局
兩列布局使我們再做頁面的時候用的最多的布局方式，也是設計稿種最常見的一種布局型別，一般分為 一列固定寬度另一列自適應寬度，兩列自適應寬度，兩列相同高度等形式 這篇文章將詳細介紹各種兩列布局的實現方式 說起 布局是在css3之前相容性最好的一種布局方式，使用 做兩列自適應寬度或者高度布局能夠在ie6瀏...
CSS兩列布局的多種方式
固定 自適應.container 修改css就可實現位置調換，如下 優點 交換固定 自適應 順序 實現主要內容優先載入渲染。缺點 absolute 定位，脫離文件流，當 sidebar 列的高度，超過 main 列的高度，會遮住下面的元素。需要給父盒子設定 overflow 屬性。固定 自適應.si...
兩列布局 多列布局
用css html編寫乙個兩列布局的網頁，要求右側寬度為200px，左側自動擴充套件 container left div right div div 利用浮動float margin container left right利用彈性盒子來寫 container left right利用定位posi...