前面我们简单叙述过，流动模型（Flow Model）是 XHTML 中默认的网页布局模式，在一般状态下，网页中元素的布局都是以流动模型为默认的显示方式。在了解流动模型的特征前，我们先了解下文档流的概念。在 CSS 的布局理论中，理解了文档流对理解布局原理都会变得易于理解。
文档流（Document Flow）
文档流（Document Flow）是网页默认的布局和显示的形式，其本意是指连续的文本信息，可以分布在多个不连续的文本块中，这些分散的文本以“流”的形式相互衔接。“流”是一种信息输入、输出的形式，其中输入可以理解为“布局”、“排列”，输出可以理解为“显示”。在网页中，元素默认按自上而下一行一行依次流动布局和显示，在每行中按从左至右的顺序依次流动布局和显示元素。
在网页内容的显示中，元素自上而下按顺序动态分布，要改变化其在网页中的位置，只能修改网页结构中元素的先后排列顺序和分布位置来实现。同时流动模型中每个元素都不是一成不变的：当在一个元素前面插入一个新的元素时，这个元素本身及其后面的元素的位置会自然向后流动推移。
下面是一个依据文档流排列的内容：
这是段落元素<p>，默认按自上而下一行依次布局（排列）和显示。
只是在开发人员之间口口相传。你必须知道以某种方式做某件事，否则在某种浏览器中就会出问题。但是，你记不住是哪种浏览器以及为什么会出问题。所以，就需要有一本书将最有用的CSS技术汇总在一起，并且集中介绍现实的浏览器问题，从而弥补人们CSS知识中的欠缺。本书会帮助你加快学习CSS的过程，使你的代码很快达到CSS专家的水平。读者对象本书适合具有(X)HTML和CSS基本知识的任何人。无论你是刚刚接触CSS设计，还是这是段落元素<p>，默认按自上而下一行依次布局（排列）和显示。它占据了一整行，隔开了文档流。同时您可以看到<p>里面的文档流动受左侧div区块的影响进行避让。
已经开发纯CSS站点好几年了，本书中都有适合你的内容。如果你已经使用CSS一段时间了，但还不是专家，那么你能够从本书获得最大的收益。本书充满了实用的现实建议和示例，可以帮助你精通现代CSS设计。本书结构本书的前两章讨论基本的CSS概念和最佳实践，帮助你轻松地入门。你将学习如何建立代码结构和加注释、CSS定位模型的细节以及浮动和清理的工作原理。你可能已经掌握了其中的许多内容，但是可能会发现自己有遗漏或理解不充分的地方。
基于文档流的概念，就能很容易理解以下的定位模式：
相对定位：即相对于元素在文档流中位置进行偏移，但保留原占位。
绝对定位：即完全脱离文档流，相对于 position 属性非 static 值的最近父级元素进行偏移。
固定定位：即完全脱离文档流，相对于视区进行偏移。
在 XHTML 中，所有元素会遵循文档流的基本规律进行排列显示，但是XHTML 元素还具有不同的特性，了解这些元素的特性更有利于理解流动模型的显示特征。
XHTML 元素的分类
根据 CSS 的显示分类，XHTML 的元素分为块级元素、内联元素和可变元素三类。
1、块级元素（Block Element）
块级元素是指在网页中显示为矩形块状区域形式的元素。
块级元素默认的 display 属性为 block。块级元素一般都作为其他元素的窗口，其特点为：
(1) 以行的形式占据一行位置。多个块级元素不会并列显示，按顺序自上而下排列显示，后一个元素将被挤到下一行显示。
(2) 宽度缺省是它所在容器的100%，不管我们将其宽度设置为多少宽，块级元素都会独占一行。
(3) 可以定义其高度、行高以及内外边距。
(4) 块级元素有：html,body, div, address, blockquote, dl,dt,dd, fieldset, form, h1-h6, hr, noframes, ol, p, pre, ul ,center, dir,menu,table
常用块级元素有：
<body> 整体元素
<div> 容器元素
<h1>~<h6> 标题元素
<p> 段落元素
<ul> <ol> <li> 列表元素
<table> <tr> <td> 表格元素
<form> <fieldset> 表单元素
<dl> <dt> <dd> 定义列表元素
2、内联元素（Inline Element）
任何不是以块级元素的可见元素都属于内联元素。
内联元素默认的 display 属性为 inline。其特点为：
(1) 内联元素不会独占一行，在行内会逐个进行显示，后一个元素自动贴到自己的右侧显示。
(2) 内联元素没有自己独有的形状，不能设置高度和宽度，默认宽度就是它所容纳的内容（文字或图片）的宽度。
(3) 内联元素不排斥其他元素，嵌入行内并随行移动，居无定所。
(4)若元素的 display 属性为 inline-block，则为块状元素，块状元素从本质上讲也是内联元素的一种特例，不过其带有块级元素的一些特征，比如可以设置其高度和宽度。
(5) 内联元素有：a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, q, samp, script, select, small, span, strike, strong, sub, sup, textarea, tt, var ,basefont, font, s, u
常用内联元素有：
<span> 小容器元素
<a> 链接元素
<img> 图片元素
<input> 表单子元素
3、可变元素
可变元素是根据上下文的关系来确定元素是以块级元素显示还是以内联元素显示。
从本质上讲，可变元素依然是属于上面二种元素的分类，因为一旦上下文的关系确定了它的类别，它就会遵循块级元素或内联元素的规则。
常用可变元素有：
<button> 按钮元素
<iframe> 内嵌框架元素
<map> 图像映射元素
<object> object对象元素
<script> 客户端脚本元素
<ins> 插入文本元素
<del> 删除文本元素
<applet> Java Applet元素
XHTML 元素间的转换
有时候我们希望为内联元素设置高度和宽度，有时也需要将内联元素变为块级元素，或将块级元素变为内联元素，或将块级元素、内联元素变为浮动元素。
设置内联元素的 CSS 属性为 display:block; ，就可以强制转变为块级元素，为元素之后添加新行；
设置块级元素的 CSS 属性为 display:inline; ，就可以强制转变为内联元素，从元素中删除行；
设置块级元素的 CSS 属性为 display:inline-block; ，就可以强制转变为内联的块状元素。块状元素与块级元素不同的是，元素作为块对象呈递，即旁边的内联对象会被呈递在同一行内；
设置元素的 CSS 属性为 float: left; 或 float: right;，就可以强制转变为浮动元素，浮动元素也具有块级元素的一些特性。
流动模型（Flow Model）
任何元素在没有定义拖出文档流定位方式属性（position: absolute; 或position: fixed;）、没有定义浮动于左右的属性（float: left; 或 float: right;）时，这些元素都将具有流动模型的布局模式，都将依据文档流的默认方式进行布局和显示。
流动模型（Flow Model）是 XHTML 中默认的网页布局模式，在一般状态下，网页中元素的布局都是以流动模型为默认的显示方式。在了解了上述文档流和 XHTML 元素的特性后，所有元素会遵循自己的默认的特性进行显示，同时会遵守文档流的显示规则，从而构成流动模型的基本布局特征。
Copyright © 2003- PowerEasy Yahu All Rights Reserved.
