通常我们了解了 CSS 的盒模型，网页布局还有基本的布局模型：Flow Model（流动模型）、Float Model（浮动模型）和 Layer Model（层模型）这三类布局模型与盒模型一样是 CSS 的核心概念，了解和掌握这些基本概念对网页布局有着举足轻重的作用，抽象的理论对于思路的梳理具有重要作用，所有 CSS 布局技术都应建立在盒模型、流动、浮动和定位这4 个最基本的概念之上。千变万化的技巧应用其实都是这些基本概念在舞动，而且如果理解了核心概念的真谛，那么创建 CSS 布局实际上就是按图索骥了。这里我们一起探讨一下网页布局的三类布局模型。

一、Flow Model（流动模型）

　　流动模型（Flow Model）是 HTML 中默认的网页布局模式，在一般状态下，网页中元素的布局都是以流动模型为默认的显示方式。这里的一般状态，是指任何元素在没有定义拖出文档流定位方式属性（position: absolute; 或position: fixed;）、没有定义浮动于左右的属性（float: left; 或 float: right;）时，这些元素都将具有流动模型的布局模式。

　　流动模型的含义来源于水的流动原理，一般也称之为文档流。在网页内容的显示中，元素自上而下按顺序动态分布，要改变化其在网页中的位置，只能修改网页结构中元素的先后排列顺序和分布位置来实现。同时流动模型中每个元素都不是一成不变的：当在一个元素前面插入一个新的元素时，这个元素本身及其后面的元素的位置会自然向后流动推移。

　　流动模型的优点：

　　元素之间不会存在叠加、错位等显示问题，自上而下、自左而右显示的方式符合人们的浏览习惯。

　　流动模型的缺点：

　　其位置自然流动时，无法控制其自由的位置，从而设计出个性化、艺术化的页面效果。

二、Float Model（浮动模型）

　　浮动模型（Float Model）是完全不同于流动模型的另一种布局模型，它遵循浮动规则，但是仍然受流动模型带来的潜在影响。任何元素在默认状态下是不浮动的，但都可以通过 CSS 定义为浮动于左右的属性（float: left; 或 float: right;）时定义为浮动。浮动模型汲取了流动模型和层模型的优点，以尽可能实现网页的自适应能力。

　　当元素定义为 float: left; 或 float: right; 浮动时，元素即成为了浮动元素，浮动元素具有一些块状元素的特征，但若没有给其定义宽度时，其宽度则为元素中内联元素的宽度。

　　浮动模型的优点：

　　浮动模型不会与流动模型发生冲突，浮动元素在垂直方向上会从属于文档流。浮动模型始终在包含元素（即父元素）之内，与流动模型在布局上形成互补，同时与层模型混合应用，弥补了层模型位置固定不变的缺陷。

　　浮动模型的缺点：

　　1、浮动元素在环绕问题方面与流动元素有本质的区别，若与块元素进行混合布局，则会出现很多复杂的情况。
　　2、浮动元素存在着浮动清除的布局混乱问题，在 CSS 中提供了定义元素的 clear 属性解决浮动清除的问题。浮动清除问题一直是个比较复杂的布局问题，可以看下《清除浮动的一般解决方案 》一文。

三、Layer Model（层模型）

　　层模型（Layer Model）是在网页布局中引入图像软件中层的概念，以用于精确定位网页中的元素。这种网页布局模式的初衷是摆脱 HTML 默认的流动模型所带来的弊端，以层的方式对网页元素进行精确定位与层叠，从而增强网页表现的丰富性。

　　层模型的优点：

　　1、层模型可以精确定位网页中元素的相对位置，可以相对于浏览器窗口、相对于最近的包含元素（即父元素）、或相对于元素原来的位置。
　　2、层模型可以实现元素之间的层叠显示效果，这在流动模型中是不具备的。在 CSS 中定义元素的 z-index 属性来实现定位元素的层叠等级。但是 z-index 属性只有在元素的 position 属性的值为 absolute、relative 或 fixed 时才可以使用（目前 fixed 值部分浏览器不支持）。

　　层模型的缺点：

　　网页布局与图像处理有一定的差距，层模型不能兼顾到网页在浏览时的可缩放性和活动性（如浏览器大小缩放、区块中内容会变长缩短），很多内容无法预测与控制（如循环栏目列表可能会无限拉长页面），因而全部使用层模型会给浏览者带来很大的局限，同时无法自适应网页中内容的变化。

　　以上只是简要叙述了流动模型、浮动模型和层模型这三种布局类型的一些基本知识，在页面实际布局过程中，一般都是以流动模型为主，同时辅以浮动模型和层模型配合使用，以实现丰富的网页布局效果。关于这三种模型其本身的特性，我们在后面的文章中逐步进行探讨和研究。