兩列布局使我們再做頁面的時候用的最多的布局方式，也是設計稿種最常見的一種布局型別，一般分為：一列固定寬度另一列自適應寬度，兩列自適應寬度，兩列相同高度等形式 這篇文章將詳細介紹各種兩列布局的實現方式
說起**布局是在css3之前相容性最好的一種布局方式，使用**做兩列自適應寬度或者高度布局能夠在ie6瀏覽器中得到很好的相容。示例：
檢視案例：
從上邊的案例中可以看到通過使用**能夠輕鬆實現左右列高度一樣的效果，而不用擔心左右內容不同意的問題。優點：自適應強，相容性好；缺點html結構**量多。
浮動布局是繼**布局後比較常用的一種布局方式，它通過給元素設定左右浮動實現。示例：
檢視案例：
通過上邊的各種案例可以看出，浮動布局在html結構**上比**精簡了很多，但是要想實現一些特殊效果還需要些通過不同方式實現，同時還需要解決由浮動帶來的各種問題
比如浮動後父級高度不能自適應內容高度，需要給父級設定overflow來觸發父級的bfc，或者給父級設定偽類，或者新增空div清除浮動方式來解決高度塌陷問題。
不能做到兩列高度統一，也需要借助其他方式解決，給乙個列新增外部div並且設定和另一列一樣的背景顏色來在視覺上達到一樣高度的效果。
浮動布局的優點：結構**量少，**看上區可讀性強；缺點：需要解決由浮動帶來的一系列問題，無法實現真正意義上的左右高度一樣效果。
示例：
檢視案例：
行內塊元素布局優點：
它能夠解決浮動布局帶來的問題，
兩列高度不一樣的問題（前提必須給父級設定高度）；
不存在父級高度塌陷問題。
缺點：不能做一列固定另一列自適應寬度，
只能設定百分比寬度做到兩列寬度自適應；
由於瀏覽器對**中的空格渲染站位問題，需要**不能有換行空格，或者通過其他方式處理如：font-size:0;letter-spacing: -.35em;
兩列定位布局通常為父級設定相對定位，一列設定絕對定位固定寬度或者百分比寬度，然後按照父級靠左或者靠右定位，然後另一列設定間距來空出定位列的位置示例：
檢視案例：
定位布局的優點：
它可是使比較低的列能夠自適應比較高的列的高度（前提需要低的列絕對定位然後設定100%高度或者上下位置為0）
缺點：當非定位列不夠高還是撐不開父元素高度，導致後邊的內容上移也就是父級高度塌陷。
嚴格意義上講columns使用來實現文字類似於報紙一樣的排版效果，但是他也能用來布局頁面示例：
檢視案例：
從上邊案例可以看出，columns更適合多列等寬布局，並且是那種層次不齊的瀑布流效果。它並不能為單獨列設定單一寬度
css3中的flex彈性盒模型布局的出現彌補了上邊所介紹的布局的不足之處
示例：
檢視案例：
css3中的grid網格布局是更加靈活的一種布局模式，用網格布局實現兩列布局更加方便
示例：
檢視案例：
上邊案例可以看到，使用網格布局實現兩列布局最簡單的方法就是直接給父級設定樣式就能實現，而且還可以輕鬆實現高度統一。通過使用網格可以用多種方式實現兩列布局
兩列布局的多種方式
面試的時候真的太常被面到這個問題了！所以還是實踐一下做個筆記吧。html布局如下 class content class left hellop i am leftp div class right hip i am rightp div div body 若不做任何操作，其樣式為 左邊固定為200...
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...