CSS传统布局之布局模型

刚开始准备这篇文章的时候，查到的有很多包含“布局模型”的中文博客或是资料，但是google上并未找到类似字眼，google到的是“flex layout module”“grid layout module”“ruby layout module”

本文只谈这三个模型，不谈具体布局实例。

网页布局有三个布局模型：

1. flow   流动模型，网页默认的布局模型，即自上而下，自左而右的分布页面元素。
2. float   浮动模型，
3. layer  层模型

上面三点是概念上的东西，具体操作起来则需要盒模型+display属性+float属性+position属性三个属性来实现：

1. 假如你只使用了display属性，它的值可以是block inline inline-block 等等，都可以，那么你使用的就是flow模型
2. 假如你使用了float属性，值不为none，那么你使用的是float模型
3. 假如你使用了position属性，那么你使用的就是layer模型

同时，需要明确一点，这三种模型并不是割裂开的，与此相反，通常都是紧密联系的。

比如：

Q：如何让一个父元素靠近页面右边，而它的子元素靠近该父元素的左边？

A：只对父元素使用浮动模型（float） 或是层模型（layer）就可以了。因为子元素默认的不就是流动模型（flow）吗？