https://zhuanlan.zhihu.com/p/25070186?refer=learncoding
三栏布局，顾名思义就是两边固定，中间自适应。
左边商品导航和右边导航固定宽度，中间的主要内容随浏览器宽度自适应。
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>
简单实用，并且主要内容可以优先加载。
网友评论