1.流体布局
左右模块儿各自向左右浮动，并设置中间模块margin 值使中间模块宽度自适应。
.left {
float: left;
height: 200px;
width: 100px;
}
.right {
width: 200px;
height: 200px;
float: right;
}
.main {
margin-left: 120px;
margin-right: 220px;
height: 200px;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
缺点：就是主要内容无法最先加载，当页面内容较多时会影响用户体验
2.BFC 三栏布局
BFC 规则有这样的描述：BFC 区域，不会与浮动元素重叠。因此我们可以利用这一点来实现 3 列布局
.left {
float: left;
height: 200px;
width: 100px;
margin-right: 20px;
}
.right {
width: 200px;
height: 200px;
float: right;
margin-left: 20px;
}
.main {
height: 200px;
overflow: hidden;
}
缺点跟方法一类似，主要内容模块无法最先加载，当页面中内容较多时会影响用户体验。因此为了解决这个问题，有了下面要介绍的布局方案双飞翼布局。
3.双飞翼布局
利用的是浮动元素 margin 负值的应用，主体内容可以优先加载，HTML 代码结构稍微复杂点。原理：
1、父元素包含左中右三个盒子，分别左浮动
2、中间元素宽度100%（必须为第一个渲染）
3、用margin-left的负值将两边盒子拉上去和中间盒子同行（左边-100%，右边-右盒子宽度）
4、给中间元素设置子元素，并给其左右margin为左右盒子留位置
5、给父元素上清除浮动
.content {
float: left;
width: 100%;
}
.left {
float: left;
height: 200px;
width: 100px;
margin-left: -100%;
}
.right {
width: 200px;
height: 200px;
float: right;
margin-left: -200px;
}
.main {
height: 200px;
margin-left: 110px;
margin-right: 220px;
}
4.圣杯布局
跟双飞翼布局很像，有一些细节上的区别，相对于双飞翼布局来说，HTML 结构相对简单，但是样式定义就稍微复杂，也是优先加载内容主体。原理：
1、父元素包含左中右三个盒子，分别左浮动
2、中间元素宽度100%（必须为第一个渲染）
3、用margin-left的负值将两边盒子拉上去和中间盒子同行（左边-100%，右边-右盒子宽度）
4、父元素用左右padding为左右盒子留位置
5、用相对定位将左右元素移动到正确的位置上
6、给父元素上清除浮动
.container {
margin-left: 120px;
margin-right: 220px;
}
.left {
float: left;
width: 100px;
height: 300px;
margin-left: -100%;
position: relative;
left: -120px;
}
.right {
float: left;
width: 200px;
height: 300px;
margin-left: -200px;
position: relative;
right: -220px;
}
.main {
float: left;
width: 100%;
height: 300px;
}
5、flex布局
.container {
display: flex;
}
.left {
order: -1; // 规定项目的顺序
flex: 0 1 200px;
margin-right: 20px;
height: 300px;
}
.right {
flex: 0 1 100px;
//flex属性是flex-grow, flex-shrink 和 flex-basis的简写
//flex-shrink属性定义了子元素的缩小比例
//flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间
margin-left: 20px;
height: 300px;
}
.main {
flex-grow: 1; // 规定项目将相对于其他项目进行扩展的量
height: 300px;
}
简单实用，未来的趋势，需要考虑浏览器的兼容性 (felxbox的缺点就是不能兼容IE8及以下浏览器)
6. Table 布局
.container {
display: table;
width:. 100%;
}
.left, .main, .right {
display: table-cell;
}
.left {
width: 200px;
height: 300px;
}
.right {
width: 100px;
height: 300px;
}
缺点：无法设置栏间距
