web前端开发中经常会见到两列布局的情况，整个页面中的主体部分内容分两列呈现给用户，通常会是侧栏和主栏的关系。这样的页面布局方式抽象到css布局中可以大致分为以下几种情况：两列定宽布局；一列定宽一列自适应页面宽度布局；一列不定宽一列自适应页面宽度布局。下面我们逐一来分析这几种两列布局的css解决方案。

两列定宽布局：两栏宽度固定，在页面中居中显示。

两列定宽布局实现代码

本案例通过css中的float极其clearfix属性实现了主栏660px宽，侧栏300px宽的两列布局。这个案例中需要注意的知识点是：应该在布局元素的父元素（class名为body的元素）上设置两栏总宽度，和居中显示；还有就是清除浮动的代码。

评价：由于屏幕尺寸和浏览器的差异，固定宽度页面已经不常见，所以该方案一般只作为前端学习时练习使用，现实案例中这种布局方案是很少见的。

一列定宽一列自适应布局

页面中一列固定宽度，一列自适应页面剩余宽度，整体处于页面居中位置。

方案一：使用float和margin和实现布局。

float和margin解决方案

本案例通过设置左侧side栏左浮动，让右侧main栏与side到达同一水平位置上。这时设置main元素的左间距为110px，因为side栏的固定宽度为100px，所以side和main之间还会有10px的间距。

评价：该方案在实际使用中还是较为常见的，使用float和margin可以支持绝大多数的浏览器。

方案二：使用float和overflow实现布局

float和overflow解决方案

本案例将案例一中的margin换成了overflow，设置overflow:hidden会触发BFC模式（BlockFormattingContext）块级格式化文本。BFC中的内容与外界的元素是隔离的。

评价：本方案代码简单，有一个缺点是不能兼容IE6.。

方案三：使用table实现布局

table解决方案

本方案使用table布局来实现一列定宽一列自适应的布局，将左右两栏作为表格的两列来实现布局，设置side栏的宽度为100px可以将一列的宽度设定好，不设置main栏的宽度，因为设置了table-layout：fixed；main栏会自动填充页面剩余宽度，从而实现布局。

评价：该方案在加载速度上会稍微慢一些，间距只能使用padding来设置，而不可以使用margin。

方案四：使用flex实现布局

使用flex实现布局

本案例将左右两栏的元素都设置为flex弹性元素，设定side栏的宽度为固定，设定main栏的宽度为自动适应剩余宽度，从而实现布局。

评价：该方案可以普遍用于移动端，但在pc端浏览器的兼容性还不是很好。

一列不定宽一列自适应布局

页面中一列不固定宽度，一列自动适应剩余宽度的布局方式。该种布局方式可以通过flex、table、float+overflow三种方法实现，具体实现代码这里不再呈现，大家可以参考一列定宽一列自适应布局的解决方案自行修改，达到目标布局方案的样子。

收藏转发请先关注，谢谢支持！