实现两栏布局的几种方式

两栏布局的特点：一栏固定宽度，一栏自适应宽度。

这里是相同部分的HTML代码：

<div>
	<header class="header">顶部</header>
	<div class="main">
		<div class="content">主内容</div>
        <aside class="aside">侧边栏</aside>
	</div>
	<footer class="footer">底部</footer>
</div>

这里是相同部分的CSS代码：

html, body {
	margin: 0;
	padding: 0;
}
.header, .footer {
	width: 100%;
	height: 80px;
	line-height: 80px;
	text-align: center;
	background-color: lightgray;
}
.main {
    margin: 10px 0;
}
.aside {
	height: 200px;
	line-height: 200px;
	text-align: center;
	background-color: rgb(251, 188, 5);
}
.content {
	height: 200px;
    line-height: 200px;
	text-align: center;
	background-color: rgb(52, 168, 83);
}

absolute + margin

.main {
	position: relative;
}
.aside {
	width: 200px;
	position: absolute;
	top: 0;
	left: 0;
}
.content {
	margin-left: 210px;
}

优点：

1. 可以通过改变css，调整侧边栏和主内容的左右顺序。
2. 可以保证主内容区域优先渲染。

缺点：侧边栏是绝对定位，脱离文档流，当.aside的高度比.content的高度高时，无法撑开父元素.main的高度，侧边栏会遮盖到底部。

float + margin

<div>
	<header class="header">顶部</header>
	<div class="main">
        <aside class="aside">侧边栏</aside>
        <div class="content">主内容</div>
	</div>
	<footer class="footer">底部</footer>
</div>

.aside {
	width: 200px;
	float: left;
}
.content {
	margin-left: 210px;
}

优点：同样可以通过改变css，调整侧边栏和主内容的左右顺序。
缺点：

1. 侧边栏设置为浮动布局，脱离文档流，同样有无法撑开父元素.main的高度的问题。
2. 侧边栏必须在主内容前面，无法实现主内容区域优先渲染。

float + 负margin

.main {
	padding-left: 210px;	/* 1. 给侧边栏腾出200px的位置 */
	overflow: hidden;		/* 3. 用来清除子元素的浮动 */
}
.aside {
	width: 200px;			/* 2. */
	float: left;			/* 2. */
	position: relative;		/* 4.1 设置为相对定位*/
	left: -210px;			/* 4.2 把侧边栏向左移210px */
	margin-left: -100%;		/* 5. 把侧边栏向上移 */
}
.content {
	float: left;			/* 2. */
	width: 100%;			/* 2. */
}

这种方法结合了上面两种方法的优点，而且没有它们的缺点，推荐使用这种方法。
优点：

1. 可以通过改变css，调整侧边栏和主内容的左右顺序。
2. 可以保证主内容区域优先渲染。
3. 没有无法撑开父元素.main的高度的问题。

float + calc函数

.main {
	overflow: hidden;
}
.aside {
	width: 200px;
	float: right;
	margin-right: 10px;		/* 这是为了把侧边栏和主内容分开，不是核心代码 */
}
.content {
	float: right;
	width: calc(100% - 210px);
}

优点：同上。
缺点：calc函数的兼容性不够友好。

flex

.main {
	display: flex;
}
.content {
	flex: 1;
}
.aside {
	width: 200px;
	order: -1;
	margin-right: 10px;		/* 这是为了把侧边栏和主内容分开，不是核心代码 */
}

优点：简单粗暴，用少量的代码就能实现。
缺点：flex兼容性不太友好。