左右布局在前端開發中經常遇到，但是實現方法五花八門，自己也一直比較糾結該使用哪種方式，今天將收集到的一些方法總結一下，以備后用。
1、左右定寬布局
浮動應該是實現左右布局的最常用的方式，下面就是使用浮動制作左右布局的效果。
如果左右兩邊的寬度確定，則可以左欄使用float:left; 右欄使用float:right; 這樣可以解決ie6下3像素bug的問題。關於ie3像素bug請參考這里。
2、左欄定寬，右欄自適應寬度
<div style="margin: 0 auto;"> <div style="width: 200px; height: 100px; float: left; background-color: #95f49e;">left</div> <div style="background-color: #fff; height: 100px; border: 1px solid #ccc;">right</div> </div>
方法1：左欄使用float:left; 如果左欄的div是一幅圖片，想讓右邊的文字圍繞圖片顯示，則去掉右邊的div，將文字直接寫入左欄div的后面即可。這種方式同樣在ie6下會有3px的bug。
方法2：使用負margin
<div id="demoLayout" style="width: 500px;"> <div style="min-height: 170px; padding: 10px;"> <div class="demoShowPic"><img src="http://www.hicss.net/wp-content/uploads/2011/toygersKittens.jpg" alt="toygers kittens" width="200" height="166" /></div> <div style="margin: -170px 0 0 215px;">負margin能夠替代float浮動布局，進行左右布局規划，並且擁有float所沒有的自適應效果。你可以嘗試點擊變寬和變窄按鈕來查看本例。現如今，負margin技術的應用可謂越來越廣，任一個大型站點驚鴻一瞥之下都會有其身影所在。</div> </div> </div>
使用負margin的好處是，改變父div的寬度時，右邊文字div會自適應。但是使用負margin也有個問題，即如果內部最后一個子元素使用負margin上移后，由於父元素是其邊距元素，其實際高度由於內部子元素上移也會跟着變小。解決方式就是設置一個最小高 度，最小高度值為較小的固定元素高度（此例即為左邊固定的圖片高度），就可徹底解決負margin上移影響父元素高度Bug。
3、三列等高
三列等高布局，並且不允許使用背景平鋪，這好像是一個公司的面試題。網上有個牛人使用背景分離的方式實現，且不使用任何expression和hack，記下鏈接。
源碼為：
<style> .col1{ width:30%;float:left;position:relative;left:70%;} .col2{ width:40%;float:left;position:relative;left:70%;} .col3{ width:30%;float:left;position:relative;left:70%;} .container1{background-color:yellow; float:left; overflow:hidden;} .container2{background-color:blue; float:left;position:relative; right:30%;} .container3{background-color:red; float:left;position:relative;right:40%;} </style> <div class="container1"> <div class="container2"> <div class="container3"> <div class="col1">this is first col Heroku和Morph實驗室是Ruby on Rails的托管提供商，提供運行Ruby on Rails應用的整套環境。和傳統的托管商相比，他們並不僅僅是提供一個服務器給你，而且提供有趣的工具和接口來幫助你更加容易的工作，使你從繁重的安 裝、配置、管理和保證服務器安全中解脫出來。兩者皆是使用Amazon的EC2網格計算技術來運行應用，因此你可以毫不擔心可伸縮性與性</div> <div class="col2">this is second col</div> <div class="col3">this is third col</div> </div> </div> </div>
這里面需要注意一點：容器也必須是左浮動的，否則背景顏色無法顯示，容器相對定位移動自然無法達到預期效果。
這個問題有必要解釋下：一個父div包含多個子div時，如果子div設置了浮動，父div沒有設置高度，此時浮動的子div就離開了原來的布局，因此父div就沒有高度了（不設置浮動時父div的高度是由於被子div的內容撐開了，所以才有高度），自然父div的背景也就沒了。
可見父容器背景無法顯示是由於父容器沒有了高度，解決方法還有其他幾種：
a）除了給父div也增加浮動外，還有一種方法。就是在<div class="col3">this is third col</div>后面再加一個<div class="clear" style="clear:both;height:0;"></div>，這樣即使三個父容器不加浮動也可以達到預期效果。clear:both;即清除左右的浮動，使當前的div獨占一行，這樣父容器的高度就等於Max(col1.height,col2.height,col3.height)+clear.height。height:0;是為了修正ie下的bug。當然這樣的一個弊端就是增加了一個無語義的標簽，不太友好。
b) 只適用於ie。既然父容器沒有了高度，就強制讓父容器有高度，在ie下觸發父容器的haslayout屬性，可以通過設置父容器的zoom:1;屬性達到目的。即 .container3{background-color:red; zoom:1;position:relative;right:40%;}這樣在ie下也可以。
最后在提醒下，container2和container3是不能設置overflow:hidden;屬性的，否則就會將container2和container3觸發為BFC（block formatting context，詳細定義后續再寫文章解釋下吧）。一旦觸發為bfc就會隔斷浮動，也就是說如果container3觸發為bfc，則col1, col2, col3三列的浮動只在container3中起作用，即使你在col1中設置了position:relative;left:70%;移位屬性也不能跨越container3的邊界。不知道我理解的對不對：）。
在ie7下需要給container1，container2，container3都加上width:100%屬性。