本文主要总结了两栏布局（两列自适应、一列固定一列自适应）、三栏布局（两边固定中间自适应）的一些方法，以便遗忘时能方便查询。
一、两栏布局
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 中的顺序。
（欢迎大家多多补充~）
CSS --- 两栏、三栏布局
原文地址：https://www.cnblogs.com/huanqna/p/8183581.html