1. 流体布局

.left{float:left;height:200px;width:100px;backgroundcolor:red;}

.right{width:200px;height:200px;background-color:blue;float:right;}

.main{margin-left:120px;margin-right:220px;height:200px;background-color:green;}

<divclass="container"><divclass="left"></div><divclass="right"></div><divclass="main"></div></div>

左右模块各自向左右浮动，并设置中间模块的 margin 值，中间模块宽度自适应。

缺点就是主要内容无法最先加载，当页面内容较多时会影响用户体验。

2. BFC 三栏布局

BFC 规则有这样的描述：BFC 区域，不会与浮动元素重叠。因此我们可以利用这一点来实现 3 列布局。

.left{float:left;height:200px;width:100px;margin-right:20px;background-color:red;}

.right{width:200px;height:200px;float:right;margin-left:20px;background-color:blue;}

.main{height:200px;overflow:hidden;background-color:green;}

<divclass="container"><divclass="left"></div><divclass="right"></div><divclass="main"></div></div>

缺点跟方法一类似，主要内容模块无法最先加载，当页面中内容较多时会影响用户体验。因此为了解决这个问题，有了下面要介绍的布局方案双飞翼布局。

3. 双飞翼布局

.content{float:left;width:100%;}

.main{height:200px;margin-left:110px;margin-right:220px;background-color:green;}

.left{float:left;height:200px;width:100px;margin-left:-100%;background-color:red;}

.right{width:200px;height:200px;float:right;margin-left:-200px;background-color:blue;}<divclass="content"><divclass="main"></div></div><divclass="left"></div><divclass="right"></div>

利用的是浮动元素 margin 负值的应用，感兴趣的同学可以上网搜搜原理。

主体内容可以优先加载，HTML 代码结构稍微复杂点。

4. 圣杯布局

.container{margin-left:120px;margin-right:220px;}

.main{float:left;width:100%;height:300px;background-color:red;}

.left{float:left;width:100px;height:300px;margin-left:-100%;position:relative;left:-120px;background-color:blue;}

.right{float:left;width:200px;height:300px;margin-left:-200px;position:relative;right:-220px;background-color:green;}

<divclass="container"><divclass="main"></div><divclass="left"></div><divclass="right"></div></div>

跟双飞翼布局很像，有一些细节上的区别，相对于双飞翼布局来说，HTML 结构相对简单，但是样式定义就稍微复杂，也是优先加载内容主体。

5. Flex 布局

<!DOCTYPE html><htmllang="en"><head><style>.container{display:flex;}.main{flex-grow:1;height:300px;background-color:red;}.left{order:-1;flex:01200px;margin-right:20px;height:300px;background-color:blue;}.right{flex:01100px;margin-left:20px;height:300px;background-color:green;}</style></head><body><divclass="container"><divclass="main"></div><divclass="left"></div><divclass="right"></div></div></body></html>

简单实用，未来的趋势，需要考虑浏览器的兼容性。

6. Table 布局

<!DOCTYPE html><htmllang="en"><head><style>.container{display:table;width:100%;}.left,.main,.right{display:table-cell;}.left{width:200px;height:300px;background-color:red;}.main{background-color:blue;}.right{width:100px;height:300px;background-color:green;}</style></head><body><divclass="container"><divclass="left"></div><divclass="main"></div><divclass="right"></div></div></body></html>

缺点：无法设置栏间距

7. 绝对定位布局

<!DOCTYPE html><htmllang="en"><head><style>.container{position:relative;}.main{height:400px;margin:0120px;background-color:green;}.left{position:absolute;width:100px;height:300px;left:0;top:0;background-color:red;}.right{position:absolute;width:100px;height:300px;background-color:blue;right:0;top:0;}</style></head><body><divclass="container"><divclass="main"></div><divclass="left"></div><divclass="right"></div></div></body></html>

简单实用，并且主要内容可以优先加载。

三栏布局