CSS2.1明确了2个模型，一个是众所周知的盒模型(Box model)，CSS1没有盒模型的概念，盒模型的前身在CSS1里叫做面向盒的格式化模型。元素抽象为盒，以盒为对象设计思路清晰多了。CSS3的盒模型丰富了更多属性。盒的产生，以及盒的定位就是CSS2.1定义的第二个模型：可视格式化模型(Visual Formatting Model)。CSS3相关的布局标准实际上也在这个大的框架之下。
CSS布局有明确标准始于CSS2。CSS1里压根没提布局，虽然CSS1里有Float元素的定义，但它的设计不是为页面布局，只是为了实现图文绕排。早期用table布局便顺理成章。CSS2是1998年变为推荐标准的，按理此时应该普及新的CSS布局标准，但table布局的使用习惯一直保持到2004年才被Jeffrey Zeldman那本书点醒。05年它的中文版《网站重构》出版，国内掀起重构浪潮。早期网页开发者是受网页制作软件束缚的，如Frontpage和Dreamweaver等，完全没有标准的概念。
CSS2.1的布局分为3种：
- 常规流(Normal Flow)
- 浮动(Float)
- 绝对定位(Absolute Position)
这3种不能混用。如果代码里看到position:absolute;display:block;，这种明显是概念混乱。很多人也错把 position:relative和position:absolute归为一类。position:relative是常规流中的一种，例外是它可以和Float一起使用。
IE6时代被忽视的常规流布局：
- Inline-Block
兼容方法：触发IE的hasLayout可以实现相似的效果，以至于可以兼容IE6/7，该方法逐渐被广泛应用。
- CSS Table
兼容方法：http://caniuse.com/#feat=css-table，仅不兼容IE6/7，在IE6时代被埋没。
对float的滥用就像当年对table的滥用。很多人设计布局时不假思索的用Float，明显欠缺对布局技术有更多了解。尤其在低端浏览器日渐淡出，新的布局技术触手可及的当下，是时候学习实践这些新技术了。
CSS3只是一种笼统的叫法。有CSS Level 1，CSS Level 2，时至今日还没有CSS Level 3。CSS2.1之上的新标准大部分仍在WD状态，只有CSS Color Level 3和Selectors Level 3进入REC状态。
【提示】
W3C各状态说明请参阅第1章说明。
新的布局标准可以更简单、更灵活的实现布局。目前，CSS3有如下多种布局方案：
Multi-Column Layout
当前状态：CR。
历史：1999年6月23日发布PD，2009年12月17日进入CR状态。
兼容性：http://caniuse.com/#feat=multicolumn。
Demo: http://dabblet.com/gist/5507829。
问题：
- 目前只能平均分栏，还不支持分别指定栏宽（未来会有）。
- 浏览器支持的新旧标准不一。
例如，在上面Demo示例中div.intro的内容想保持在一栏中，Chrome支持column-break-inside: avoid;这是2005年12月15日更新的WD中的标准。由此推测Chrome遵循的是2005年的WD标准。目前CR标准已改成break-inside。Firefox20仍实现的是2001年的WD标准。
- 多栏布局更适合用于内容流布局，不适合页面布局。
Flexible Box Layout
当前状态: CR。
历史：2009年7月23日发布PD，2011年3月22日进入WD状态，2012年9月18日进入CR状态。
兼容性：http://caniuse.com/#feat=flexbox。
Demo: http://dabblet.com/gist/5508104。
Flexible Box分为两部分：Flex容器(Flex Container)和Flex项(Flex Item)。详细说明请参阅下一章内容。
Template Layout
(Grid) Template Layout 曾经称为Advanced Layout。
当前状态：WD。
历史：2005年12月15日发布PD，2007年8月9日进入WD状态。最终合并进Grid Layout。
Grid Position
历史: 2007年9月5日发布PD，随后被废弃。
Grid Layout
当前状态：WD。
历史：2011年4月7日发布PD，2012年3月22日进入WD状态，最新一版是2013年4月2日。
兼容性：http://caniuse.com/#feat=css-grid。
以这种兼容性还不值得介入学习。1996年有个基于帧布局的草案。当时没往这个方向发展，最终绝对定位进入CSS2。Grid Layout正是建在它的基础之上。
CSS3 Floating Boxes
CSS3 Floating Boxes被称为CSS3的浮动盒。
当前状态: WD。
历史：2002年10月24日就出现在CSS basic box model的草案中。
CSS3的浮动盒技术过于超前，目前还没有浏览器支持。例如：
- float: right contour; contour关键字，文字可以沿图片不规则的轮廓绕排。
- min-height: contain-floats; 新的清浮动方式。
- float-displace: block; 新的float-displace属性。
Regions和Shapes
当前状态：WD。
历史：2011年6月9日发布PD，2011年11月29日进入WD状态，最新一版WD是2012年8月23日。
兼容性：http://caniuse.com/#feat=css-regions。
Demo：http://dabblet.com/gist/5509294（Chrome 19+、IE10+）
它适用于内容流布局，兼容性有限，不建议提前学习。