CSS流体布局

流体特性

图片宽度一直width:100%，依次点击3个按钮，结果随着margin, padding, border的出现，其可用宽度自动跟着减小，形成了自适应效果。就像放在容器中的水流一样，内容区域会随着margin, padding, border的出现自动填满剩余空间，这就是块状元素的流体特性。实例：flow.html

流体布局

稍微做一个调整，div距离容器左侧margin 150像素，里面的图片同样100%自适应内容区域。实例：flow-left.html
图片右下角有两道斜杠，我们可以resize拉伸（现代浏览器，且非移动访问），会发现，左侧永远150像素留白，而图片随着容器宽度变化而自适应变化了。
此时，我们需要好好利用左侧150像素的留白间距，岂不是就可以实现两栏自适应效果！
实例效果：flow-left1.html
当然，你可以左侧有多个浮动，或者左浮动+右浮动。于是，我们不仅可以实现两栏自适应效果，多栏自适应效果也不在话下。然而，利用块状元素流体特性实现的自适应布局有个不足，就是，我们需要知道浮动或绝对定位内容的尺寸。然后，流体内容才能有对应的margin或padding或border值进行位置修正。于是，问题来了，我们没法单纯使用一个公用的类名，类似.clearfix这样，整站通用。因为不同自适应场景的留白距离是不一样的。