两栏布局在实际项目中可谓屡见不鲜，故加以总结，也方便日后查阅。

原文链接：https://xdlrt.github.io/2016/11/01/2016-11-01

先上效果图，左右两栏，间距 20px

流式布局

<div class="warp clearfix">
	<div class="left"></div>
	<div class="right"></div>
</div>
<style>
	/* 清除浮动 */
	.clearfix:after{
		content: "";
		display: block;
		height: 0;
		visibility: hidden;
		clear: both;
	}
	.warp{
		margin: 0 auto;
		width: 960px;
		height: 300px;
	}
	.left,.right{
		/* 左右两部分设置浮动 */
		float: left;
		height: 100%;
	}
	.left{
		margin-right: 20px;
		width: 220px;
		background: #F14C5C;
	}
	.right{
		width: 720px;
		background: #F5A623;
	}
</style>

该方法优点是结构和实现简单，但是左右两部分需要定宽，对响应式十分不友好。我们来加以改造，实现侧边栏定宽主要内容区域自适应。

负边距配合流式布局

首先我们需要对 html 结构加以改造，需要在主体内容的外层加一层盒子，外层的这个盒子需要宽度和最外层 warp 相等，其中主体内容设置左边距，再利用负边距来将侧边栏移到空出的位置。

<div class="warp clearfix">
	<div class="main-warp">
		<div class="right"></div>
	</div>
	<div class="left"></div>
</div>
<style>
	/* 清除浮动 */
	.clearfix:after{
		content: "";
		display: block;
		height: 0;
		visibility: hidden;
		clear: both;
	}
	.warp{
		margin: 0 auto;
		width: 960px;
		height: 300px;
	}
	.main-warp,.left,.right{
		height: 100%;
	}
	.main-warp{
		/* 这两行是关键 */
		float: left;
		width: 100%;
	}
	.left{
		float: left;
		/* 使负margin值和warp的宽度相等 */
		margin-left: -100%;
		width: 220px;
		background: #F14C5C;
	}
	.right{
		/* 侧边栏宽度+间距 */
		margin-left: 240px;
		background: #F5A623;
	}
</style>

这样的布局好处是更灵活，主体内容部分在最外层宽度变化后可以自适应宽度的改变。除了浮动还有没有方法能够实现侧边栏定宽，主体内容自适应呢？那就需要用到定位的知识了。

绝对定位

<style>
	.warp{
		/* 父元素设置相对定位 */
		position: relative;
		margin: 0 auto;
		width: 960px;
		height: 300px;
	}
	.main-warp,.left,.right{
		height: 100%;
	}
	.main-warp{
		width: 100%;
	}
	.left{
		/* 绝对定位在最左侧 */
		position: absolute;
		top: 0;
		left: 0;
		width: 220px;
		background: #F14C5C;
	}
	.right{
		/* 左边距设置为侧边栏宽度+边距 */
		margin-left: 240px;
		background: #F5A623;
	}
</style>
<div class="warp clearfix">
	<div class="main-warp">
		<div class="right"></div>
	</div>
	<div class="left"></div>
</div>

绝对定位的方法和负边距法非常类似，都是利用主体内容的左边距来为侧边栏空出位置，从而将侧边栏填入。

最后介绍一种不太常规的 inline-block 方法，如果不需要考虑 IE9 以下的浏览器，可以尝试使用一下。但是需要解决带来的额外边距问题，具体解决办法可以查阅张鑫旭大大这篇博客去除 inline-block 元素间间距的 N 种方法。

display:inline-block

<style>
	.warp{
		margin: 0 auto;
		width: 960px;
		height: 300px;
	}
	.left,.main-warp{
		display: inline-block;
		height: 100%;
	}
	.left{
		width: 220px;
		background: #F14C5C;
	}
	.right{
		margin-left: 20px;
		width: 720px;
		height: 100%;
		background: #F5A623;
	}
</style>
<div class="warp clearfix">
	<div class="left"></div><!--
	--><div class="main-warp">
		<div class="right"></div>
	</div>
</div>

以上就是一些常见的两栏布局方式，使用时根据具体需求灵活选用即可。