三栏式布局
相关代码地址：https://github.com/Xia-Ao/baidu-course/tree/master/xiaowei/layout 要求：左右两边固定宽度，中间居中，宽度自适应！ 下面探讨一下有关三栏式布局的所有方法 给定一个html模板, 要求在这个模板上尽可能用多种方法实现三栏式布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
body, html {
margin: 0;
padding: 0;
}
.left, .right, .center {
height: 200px;
}
.left{
background: yellow;
}
.right{
background: green;
}
.center{
background: red;
}
</style>
</head>
<body>
<div class="layout">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>1、flex布局
这是CSS3主推的布局模式，目前也是用的最多的，简单来说就是顺着主轴依次放3列，内容在最前，通过order控制显示顺序，通过flex-grow让中间占据全部剩余空间，通过flex-basis设置左、右div的宽度。 个人也是优先推荐使用flex实现三栏式布局。 给父元素的display属性设置为flex布局，然后左右元素设定宽度，中间自适应原始宽度设置为100%，如果顺序不对，使用使用order属性重新排序。
2、绝对定位
左右元素设置position设置为绝对定位，便脱离的文档流，然后中间元素的margin-left和margin-right设置为左右元素的宽度。
注意：right如果在文档流最后要设置top=0，一般选择将right文档流放在center元素之前。
3、float浮动脱离文档流
其实和绝对定位的原理有点相似，都是是左右元素脱离文档流，不占据中间元素的文档流。 注意：将中间的内容放在HTML结构的最后，否则右侧会沉在中间内容的下侧
4、BFC+float不会与浮动区域重叠
BFC布局有一个很重要的特点，BFC区域不会与float box重叠，BFC区域会保留float部分，利用这个特点，实现三栏式布局
5、圣杯布局
原理：将中间文档流放在前面，宽度设置为100%，然后将中间元素、左元素、右元素全部设置为float：left，然后给父元素左右margin设置为左右元素宽度，这样，结果就是中间元素占据一整行，左右元素另起一行向左浮动。
效果如下：
接下来就是想办法把左右元素定位到相对应的位置，这里使用margin负值将元素左移，左边元素左移整个宽度，然后再相对定位到最左边。margin-left:-100%将左边元素移动到上面，再使用相对定位，将左边元素移动到父元素margin留出的位置。
效果如下：
然后再将右边元素向左移动120px，margin-left:-120px，再相对定位到最右边。
最终效果如下：
6、双飞翼布局
出自淘宝前端UED团队，它将内容比作鸟的身体，左右比作双翼，所以叫作双飞翼。 它与圣杯布局很像，也是全部往左浮动，但是在中间div里再嵌套一个div，设置子div的margin为左右div预留位置，左右div只设置margin负值即可实现。与圣杯布局相比，少了position:relative，多了一个div。
7、table布局
缺点：无法设置格间距，并且左右元素display属性不能为none。
后面还有一种说法使用inline-block布局，尝试过之后发现其实并不好用。
参考
Last updated