css實現左右布局顯示是前端進行頁面設計的基礎，也是全面了解並學習css一個很好的切入點，因為其中會涉及到對許多css基礎點的認知。實現css入門，理解左右布局的實現方式是必經之路，同時也能使我們在項目中涉及前端編碼的部分受益。
下面我們就介紹自己總結的7種css實現前端左右布局的方式，如還有其他方式，請告訴我。
1. table---table的li實現
實現原理：
table標簽是能夠具有實現左右布局的屬性，也是我們項目中使用最多的。table布局也是頁面布局中使用的最早的布局方式，隨着前端技術的發展，table布局由於自身的局限性逐漸被div布局取代。
查看代碼（主要代碼）：
<table class="sTable">
<tr>
<td class="col-4 c1">1</td>
<td class="col-4 c2">2</td>
<td class="col-4 c3">3</td>
<td class="col-4 c4">4</td>
</tr>
<tr>
<td class="col-4 c5" colspan="2">5</td>
<td class="col-4 c6" colspan="2">6</td>
</tr>
<tr>
<td class="col-4 c2">7</td>
<td class="col-4 c3">8</td>
</tr>
<tr>
<td class="col-4 c2" rowspan="2">9</td>
<td class="col-4 c3">9</td>
</tr>
<tr >
<td class="col-4 c4">10</td>
<td class="col-4 c3">8</td>
</tr>
<tr >
<td class="col-4 c4">10</td>
<td class="col-4 c3">8</td>
</tr>
</table>
代碼說明：
tr表示一行，td表示一列，先實現行再實現列，所以tr中可以添加td實現盒子的左右布局。另:由於table布局由於性能問題已經逐漸被放棄使用，所以提供了table的li標簽實現，供參考。
2. inline-block
實現原理：
display:inline-block屬性是介於行級元素(display:inline)和塊級元素(display：block)之間的屬性，它可以像行級元素一樣水平布局，也可以像塊級元素設置寬高屬性，所以使用它可以進行左右布局。另：它不支持ie6、7瀏覽器，請注意，但是可以使用inline進行hack處理。
查看代碼：
html: <section class="section"> <div class="wrap"> <div class="col-4 c1">1</div> <div class="col-4 c2">2</div> <div class="col-4 c3">3</div> <div class="col-4 c4">4</div> <div class="col-4 c5">5</div> <div class="col-4 c6">6</div> </div> </section> css: .col-4{ display: inline-block; *display: inline; *zoom:1; //ie6、7hack width:25%; height:30px; border:1px solid #999; font-size: 14px; } .wrap{ margin:10px auto; max-width:1280px; min-width:1024px; font-size: 0px; } 代碼說明：
無
3. float實現左右布局
實現原理：
float屬性是css中關於布局的一個關鍵屬性，其意為將該塊狀區域脫離父級標簽的文檔流，left屬性值使該區域向父級標簽區域的左側邊界放置，right屬性值使該區域塊向父級標簽的右側邊界放置，如是利用該屬性可以實現左右布局。 float屬性屬於布局屬性，其中有着很多重要應用。
float屬性的三個特性為：
- a、包裹性：可以按照區域塊中子元素的實際寬度進行包裹；
- b、破壞性：float區域塊不會被父級區域塊包裹，造成前端常見的高度塌陷問題，解決辦法是
清除浮動；- c、占位性（個人稱呼），浮動區域塊雖然是脫離了父級區域，但是它是要占用一定的正常流區域的，即如果不清除浮動，我們會看到它會占用它后面的同級元素（如果沒有會占用它父級后面的同級元素，如果還是沒有則向上追溯）的區域，影響同級元素，所以常見清浮動。
- 以上三特性為進階部分，剛興趣的同學可以課后研究。
查看代碼：
<section class="section"> <div class="wrap"> <div class="col-4 c1">1</div> <div class="col-4 c2">2</div> <div class="col-4 c3">3</div> <div class="col-4 c4">4</div> <div class="col-4 c5">5</div> <div class="col-4 c6">6</div> <div class="clear">dgdgdg</div> </div> </section> .col-4{ float:left; width:25%; height:30px; border:1px solid #999; box-sizing:border-box;/*怪異盒子模型*/ } .wrap{ margin:10px auto; max-width:1280px; min-width:1024px; } 代碼說明：
float布局部分和inline-block布局部分比較相似，但是其中最主要的區別是：將
.c1{height:60px}
以后就會發現float布局對於后面節點的布局采用交錯式的布局，inline-block采用正常式的布局。（個人稱呼，理解即可，不用在乎怎么稱呼）
4. 基於css3中flexbox屬性實現左右布局
實現原理：
css3中出現了彈性盒子布局，即display:box;該種布局主要用於移動前端開發，因為該屬性不支持ie6、7、8，支持chrome，firefox，ie9+，同時在移動端，主要是ios和Android中基於webkit內核的瀏覽器都是支持的，所以也是一種好的布局方式。
查看代碼：
<section class="section"> <div class="wrap"> <div class="col-4 c1">1</div> <div class="col-4 c2">2</div> <div class="col-4 c3">3</div> <div class="col-4 c4">4</div> </div> <div class="wrap"> <div class="col-4 c5">5</div> <div class="col-4 c6">6</div> </div> </section> .wrap{ margin:10px auto; max-width:1280px; min-width:1024px; } .wrap{ display: -webkit-box; -webkit-box-orient: horizontal; } .col-4{ height:30px; border:1px solid #999; -webkit-box-flex:1; } 代碼說明：
在父元素中定義display：-webkit-box;在想要布局的部分定義box-flex設置寬度，實現區域的左右布局，具體請參見css手冊
5. float+margin實現左右布局
實現原理：
該部分以及向下主要說明兩欄的左右布局的實現。 float能夠使得元素向左或者向右靠邊布局，如果在同級元素中設置一個正常流的區域與浮動塊並列，則浮動塊會在該正常流同級區域的邊界處，只是浮動塊會影響該區域塊的布局，所以要清除浮動塊的影響，所以此時將正常流區域塊的盒子設置margin等於浮動塊的寬度既可以清除影響。
新浪微博采用如此方式：
補充：由margin→盒模型： css盒模型是css的基礎環節，css盒子從內到外一次有內容-padding-border-margin組成，可以通過設置各個值來設置間距。 另：對於不同的文檔模式其寬度和高度解析不同，
對於ie下怪異文檔模式或者標准文檔模式下定義了css3中的
box-sizing：border-box的元素，css中設置的寬高都是內容區寬高+padding+border的；標准文檔下或者定義了css3中box-sizing:content-box的元素，css中定義的元素寬高就是內容區的寬高。
查看代碼：
<header class="header"> <div class="wrap"> <div class="hLeft">left</div> <div class="hRight">right</div> </div> </header> .header{ background-color: #ccc; padding:1px; } .wrap{ margin:10px auto; max-width:1280px; min-width:1024px; } .hLeft{ float:left; border:1px solid #999; width:15%; height: 50px; } .hRight{ /*overflow: hidden; zoom:1;*/ height:50px; border:1px solid #999; margin-left:15%; } .box{ height: 30px; background-color: red } 代碼說明：
其中margin-left:15%;去除了浮動對同級元素產生的影響。
6. block formate context(float+overflow)實現左右布局
實現原理：
對於float對后面同級元素的影響，除了采用margin進行影響的清除，還可以在受影響的元素上添加overflow：hidden來清除浮動對該區域塊帶來的影響。具體原理是塊級格式化上下文（BFC）的應用。 關於bfc的進階了解，可以參見文章。
查看代碼：
<header class="header"> <div class="wrap"> <div class="hLeft">left</div> <div class="hRight">right</div> <!-- <div>hhh<br>hhh<br>jjj<br>sss</div> --> </div> </header> .header{ background-color: #ccc; padding:1px; } .wrap{ margin:10px auto; max-width:1280px; min-width:1024px; } .hLeft{ float:left; border:1px solid #999; width:15%; height: 90px } .hRight{ overflow: hidden; zoom:1; height:50px; border:1px solid #999; } .box{ margin:10px; border:1px solid #888; } .cbox{ height:20px; background-color: #ccc; margin:25px; float:left; width:100%; } .clear{ clear:both; } 代碼說明：
關鍵所在：.hRight{overflow: hidden;},作用在受影響的區域塊。
7. position:absolute左右布局
實現原理：
除了float可以產生脫離文檔流的布局現象以外，position：absolute也可以，但是二者又有不同之處。不同之處在於absolute可以覆蓋任何位置的元素且不會影響正常流的布局，但是會產生遮蓋，所以要求正常流要躲避絕對布局的遮擋。躲避方式可以使用margin。
查看代碼：
<header class="header"> <div class="wrap"> <div class="hLeft">left</div> <div class="hRight">right</div> </div> </header> .header{ background-color: #ccc; padding:1px; } .wrap{ margin:10px auto; max-width:1280px; min-width:1024px; position: relative; } .hLeft{ position: absolute; left:0; top:0; width:15%; height: 50px; border:1px solid #999; } .hRight{ height:50px; border:1px solid #999; margin-left:15%; } .box{ height: 30px; background-color: red } 代碼說明：
左側部分采用絕對布局，右側正常流，但是使用margin躲避遮擋。
結束語
css屬性可以大致分類為布局屬性和效果屬性（個人理解），布局屬性主要有display:inline|block|inline-block、float:left|right|none、position:absolute|fixed|relative，各個不同屬性對應的屬性值對應了各種布局方式的實現；效果屬性主要是color、background、border等等，主要修改外觀，不影響布局。css入門時主要是先把布局屬性理解並應用即可完成入門。
程序demo源碼：https://github.com/ynchuan/cssExp/blob/master/layout,參見其中文left&rightLayout.md