css经典4种经典流式布局

左侧固定，右侧自适应
左边写死宽高，并浮动，右边高度写死，但是不能设置宽度，用margin-left去留出左边盒子的宽度，右边盒子会自动内减，右侧盒子不会被撑大。
一个没有width属性的标准流盒子，设置margin和padding并不会撑大盒子的实际宽度，相当于设置了box-sizing：border-box；

左侧自适应，右侧固定
设置第一个盒子右浮动，相当于右侧盒子，第二个盒子高度固定，宽度不写，设置margin-right，盒子自动内减
注意，不可先写左侧的固定盒子，否则，左侧盒子会占一行，右侧盒子再浮动，是在下一行浮动

圣杯布局：
左右固定，中间自适应

中间固定，两边自适应
先写两侧需要浮动的，设置宽度50%，左右浮动，设置padding，再设置盒子内减，中间的盒子写死宽高，要绝对定位设置居中，否则内容会下来，因为浮动的盒子不会盖住标准流的内容

提示：dom树上都是先写浮动的，再写固定的。注意脱标的元素不会继承父元素的宽度，而是内容有多大，宽度就有多大