本文主要总结了两栏布局（两列自适应、一列固定一列自适应）、三栏布局（两边固定中间自适应）的一些方法，以便遗忘时能方便查询。
一、两栏布局
1、两列自适应
两列自适应是特别简单的布局方式，其要点在于把列宽用百分百来表示，然后可以使用 float 或 display：inline-block 等方法来让两列处于同一行。不多说，直接上代码：
方法一：使用 float
<style> .outer{ background:green; padding-bottom:20px; } .left{ float:left; width:20%; height:100px; background:red; } .right{ float:right; width:77%; //使两列之间有一个间距 height:100px; background:pink; } </style> <body> <div class="outer"> <div class="left">列一</div> <div class="right">列二</div> </div>
优点：简单
缺点：两列都脱离了文档流，两列后面的内容或父盒子无法被撑起（上图中的绿色是父盒子），故需要清除浮动。
方法二：使用 display：inline-block
<style>
.outer{
background:green;
padding-bottom:20px;
}
.left{
display:inline-block;
width:20%;
height:100px;
background:red;
}
.right{
display:inline-block;
width:60%; //设置小方便观察
height:120px;
background:pink;
}
</style>
<body>
<div class="outer">
<div class="left">列一</div> //这儿换行了，"列一" 和 "列二" 之间因换行形成了一个间隙
<div class="right">列二</div>
</div>
</body>
优点：不用考虑盒子脱离文档流的问题，父盒子总能被高的盒子撑起
缺点：需要考虑盒子的间距。
1：设置为 inline-block 的盒子因为上面注释处的换行而在浏览器渲染时形成了一个间隙（上图蓝色箭头处），故需要解决这个间隙问题。
2：如果要 “列一” 和 “列二” 之间有一个间距，则需要考虑 “列二” 宽度和间距大小的关系，可以与 margin 相结合来解决这个问题。
其他方法：
position：absolute ------ 问题与设置 float 类似。
2、一列固定一列自适应
这个布局方式也很简单，其实与上面的布局方式是相通的，方法特别多，但都是灵活的运用这几个属性。所以这儿示例以 margin、BFC来实现的布局方式。
方法一：margin
<style> .outer{ margin-left:220px; //可以考虑margin-right：-220px；但需要和float联合使用 } .left{ float:left; width:200px; height:100px; background:red; } .right{ height:120px; background:pink; } </style> <body> <div class="left">列一</div> <div class="outer"> <div class="right">列二</div> </div> </body>
缺点：无论是设置margin-left，还是设置margin-right，“列一” 和 “列二” 至少有一个是脱离文档流了的。
方法二：BFC
<style> .left{ float:left; margin-right:20px; width:200px; height:100px; background:red; } .right{ overflow:hidden; //触发BFC height:120px; background:pink; } </style> <body> <div class="left">列一</div> <div class="right">列二</div> </body>
BFC清除浮动的原理可以点这儿。简单的说，就是触发 BFC 后盒子不会与 float 区域重叠，这个方法简单好用，是我目前比较喜欢的方法。
二、三栏布局
1、两边固定中间自适应
方法一：margin
<style> .outer{ width:100%; float:left; } .center{ height:100px; margin:0 60px; background:pink; } .left, .right{ float:left; width:50px; height:100px; background:red; } .left{ margin-left: -100%; } .right{ margin-left: -50px; } </style> <body> <div class="outer"> <div class="center">列二</div> </div> <div class="left">列一</div> <div class="right">列三</div> </body>
缺点：方法比较麻烦，需要嵌套额外的盒子，需要清除浮动
要点：注意三者在 HTML 中的顺序。
方法二：position
<style>
body{
margin:0;
}
.center{
height:100px;
margin:0 60px;
background:pink;
}
.left,
.right{
position:absolute;
top:0;
width:50px;
height:100px;
background:red;
}
.left{
left:0;
}
.right{
right:0;
}
</style>
<body>
<div class="left">列一</div>
<div class="center">列二</div>
<div class="right">列三</div>
</body>
思路：中间盒子的 margin 配合两边盒子的绝对定位。
方法三：BFC
<style> .center{ overflow:hidden; height:120px; background:pink; } .left, .right{ width:50px; height:100px; background:red; margin:0 10px; } .left{ float:left; } .right{ float:right; } </style> <body> <div class="left">列一</div> <div class="right">列三</div> <div class="center">列二</div> </body>
要点：注意 “列一”、“列二”、“列三” 在 HTML 中的顺序。
（欢迎大家多多补充~）