目标
- 掌握自适应布局的解决方案（一列定宽一列自适应，或者一列不定宽另一列自适应）
- 掌握等宽布局的解决方案（多列等宽）
- 掌握等高布局的解决方案（多列等高）
定宽+自适应
-
float+margin
定宽自适应1.png -
float+overflow
不加overflowhidden时，左右会叠起来形成文字环绕，加了之后出发bfc如图
定宽自适应2-1.png
然后给left添加margin将他们分开如图
-
table
给父元素设置宽度100%，不然只是内容的宽度，加上table-layout是为了布局优先，不然，就算你设置定死的宽度，他也有可能被内容影响。table在设置了table-layout，并且left和right设置了tablecell后，left和right就成了两个单元格，同时他们两个单元格是等宽的。由于tablecell不能设置margin，所以利用padding-right
定宽自适应3.png -
flex布局
定宽自适应4-1.png
然后我们让right充满剩余的宽度，设置flex为1，这是简写，全程是110，让他的缩放因子为1，设置left为100px后，left就不参与缩放因子的分配内面，所以剩余的宽度都给了right。
两列定宽，一列自适应
其实和之前的代码都是一样的，就不一一举例了。
不定宽+自适应
1.float+overflow
左边的宽度是随着内容变换的，所以将p设置成不同的宽度都行
2.table
这次没有加table-layout:fixed，所以是内容优先的，现在左右两列不等宽，left比right少一个字母。
然后将左边的宽度设置成一个较小值，如0.1%，他并没有真实缩小到这个程度，而是由内容撑开的宽度，因为我们没有设置table-layout:fixed，所以是内容优先。
然后给左边的内容设置宽度，那么左边就是由内容定的宽度。
2.flex
只要将左边的定宽给去掉
多列不定宽+自适应
前面介绍的几种方案都可以做这件事情，如。
等宽布局
当外面的宽度变宽时，这四列都要变宽，而且始终都需要一样宽。
1.float？
确实可以利用浮动，再把每一列设置成25%。
但是如果之间有间隙就不行。
为了解决这个问题
演变之后
这种方式有一个缺点，就是必须知道总共有几列，不然百分比无法确定。
table布局就可以做到
2.table
思考：如果不加不加外面的parent-fix如何做到？
3.flex
等高布局
目标效果：
background的背景颜色是会默认在border区域的，所以设置background-clip:padding-box;这样就会把border的背景颜色裁剪掉。
flex
float
这种只是背景颜色看上去等高，不是真正意义上的等高。所以，最好用前面两种方案。
