CSS多列布局方案整理
來自： https://segmentfault.com/a/1190000004500652
了解 CSS 中屬性的值及其特性， 透徹分析問題和需求才可以選擇和設計最適合的布局解決方案。
多列布局在網頁中非常常見（例如兩列布局），多列布局可以是兩列定寬，一列自適應， 或者多列不定寬一列自適應還有等分布局等。
定寬-自適應
有如下布局
<div class="parent">
<div class="left">
<p>left</p>
</div>
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div> float+margin
.left {
float: left;
width: 100px;
}
.right {
margin-left: 100px
/*間距可再加入 margin-left */
} 優點：容易理解
缺點：IE6中會有3像素的BUG， 解決方法可以在.left 加入 margin-left:-3px 。
因為left是浮動元素，right是沒有浮動的，如果right內容中有清楚浮動就會產生bug。
改進：float + margin + (fix)
<div class="parent">
<div class="left">
<p>left</p>
</div>
/*外層在包裹一個容器*/
<div class="right-fix">
<div class="right">
<p>right</p>
<p>right</p>
</div>
</div>
</div>
<style>
.left {
float: left;
width: 100px;
}
.right-fix {
float: right;
width: 100%;
margin-left: -100px;
}
.right {
margin-left: 100px
/*間距可再加入 margin-left */
}
</style> 兼容性很好，適用于多版本瀏覽器（包括 IE6）但是多了層right-fix的結構。但left不可選擇，被right-fix蓋住。需要設置left的 position: relative; 來提高層級。
float+overflow
.left{
float: left;
width: 100px;
margin-right: 20px;
}
.right{ overflow: hidden; //觸發BFC } overflow:hidden 使得div產生了BFC 模式（Block Formatting Context）塊級格式化文本，根據BFC的布局規則之一，div那個產生的BFC區域不會與左邊浮動的元素所重疊。具體什么是BFC可以看看這篇 文章
table
.parent {
display: table;
width: 100%;
table-layout: fixed;
}
.left {
display: table-cell;
width: 100px;
}
.right {
display: table-cell;
/*寬度為剩余寬度*/
} table 的顯示特性為每列的單元格寬度合一定等與表格寬度。 table-layout: fixed; 可加速渲染，也是設定布局優先。
table-cell 中不可以設置 margin 但是可以通過 padding 來設置間距。
flex
.parent{
display: flex ;
}
.left {
width: 100px;
margin-right: 20px;
}
.right{
/*等價于flex:1 1 0; 增長因子和收縮因子都為1，
基礎寬度為0,那么剩余寬度都分配給right*/
flex: 1 ;
} flex-item 默認為內容寬度。
缺點： CSS3 兼容性。根據內容判斷，性能會有問題，做小范圍布局，不適合大范圍布局。
不定寬-自適應
float + overflow
.left{
float: left;
width: 200px;
margin-right: 20px;
}
.right{ overflow: hidden; //觸發BFC } table
.parent{
display:table;
width: 100%;
}
.left, .right {
display: table-cell;
}
.left{
width:0.1%; //寫的夠小就行，不寫1px的原因是IE8會有問題
padding-right:20px;
}
.left p{ width : 200px;} //用內部元素撐開，寬度可以不定 flex
.parent{display:flex;}
.left{margin-right:20px;}
.right{flex:1;} 三列不定寬 + 自適應 與兩列的做法一樣
等分布局
每一列的寬度和間距均相等。有如下HTML結構
<div class="parent">
<div class="column"><p>1</p></div>
<div class="column"><p>2</p></div>
<div class="column"><p>3</p></div>
<div class="column"><p>4</p></div>
</div> float
.parent{
margin-left ：-20px; //為父元素增加20px寬度
}
.column{
float : left;
width: 25%;
padding-left : 20px;
box-sizing : border-box;
} 缺點：結構和樣式稍微有點耦合性
table
.parent-fix{ margin-left ：-20px; //為父元素增加20px寬度 }
.parent{
display : table;
width : 100%;
table-layout : fixed;
}
.column{
float : left;
width: 25%;
padding-left : 20px;
box-sizing : border-box;
} fix
.parent{
display : flex;
}
.column{
flex: 1;
}
.column+.column{ margin-left: 20px; } //選擇2，3，4 等高需求
table
上面自適應的table布局就具有登高的布局
flex
如上面自適應的例子，flex 天然等高
float
.parent{ overflow : hidden; }
.left, .right{
padding-bottom : 9999px;
margin-bottom : -9999px;
} 優點是兼容性比較好缺點是偽等高 不是正真意義上的登高