工作了两年，最近发现竟然对什么左侧定宽啊右侧自适应啊各种布局有点懵逼了，这可是刚毕业求职的时候必考的啊，工作了两年一味地追求各种框架，对基础的知识反而有点陌生了，这里重新整理一下。垂直水平居中这里就不再多说了，之前整理过了，这里主要整理一下多列布局。
flex解决一切，有的布局就懒得用flex再实现一遍了，有时间单独整理一下。
左列定宽，右列自适应
float + margin
1
2
| .left{float: left;width: 100px;}
.right{margin-left: 100px;}
|
优点：兼容IE7+，便于理解；缺点：不兼容IE6，在right内部第一个元素存在清除浮动时，会发生right掉下去的情况。
float + margin + fix
1
2
3
| .left{float: left; width: 100px;position:relative;}
.right-fix{float: right; width: 100%; margin-left: -100px;}
.right{margin-left: 100px;}
|
float + overflow
1
2
| .left{float: left;width: 100px;}
.right{overflow: hidden;}
|
table
1
2
| .demo4{display: table;}
.left, .right{display: table-cell;}
|
flex
1
2
3
| .parent{display: flex;}
.left{width: 100px;}
.right{flex: 1;}
|
两列定宽，一列自适应
float + margin
1
2
| .left,.center{float: left;width: 100px;}
.right{ margin-left: -200px; }
|
float + overflow
1
2
| .left, .center{float: left;width: 100px;}
.right{ overflow: hidden; }
|
table
1
2
3
| .parent{display: table; table-layout: fixed; width: 100%;}
.left, .center, right{ display: table-cell; }
.left,.center{width: 100px;}
|
flex
1
2
3
| .parent{display: flex;}
.left, .center{width: 100px;}
.right{flex: 1;}
|
一列不定宽， 一列自适应
float + overflow
1
2
| .left{float: left;}
.right{overflow: hidden;}
|
flex
同上
多列等分布局
等高布局
高度最高的列决定所有列的高度，也就是说所有列的高度都是相等的，并且等于其中最高的列
