CSS世界---何为“文档流”

何为“流”

那究竟 CSS 世界中的“流”指的是什么呢？“流”实际上是 CSS 世界中的一种基本的定
位和布局机制，可以理解为现实世界的一套物理规则，“流”跟现实世界的“水流”有异曲同工
的表现。
现实世界中，如果我们让水流入一个容器，水面一定是平整的；我们在水里面放入物体，
如普通的木头，此时水位就会上升，木头多半浮在水面上，但只露出一点点头，如图 1-3 所示。
这些现象我们都会认为是理所当然的，因为这就是我们从小接触的一套物理规则。我们知道这
套规则，就可以理解现象，并且预知现象。例如，水量超过容器的容积很多，我们就可以预测
到水会溢出来。
感谢物理学，它让我们理解 CSS 世界的“流”就轻松多了。CSS 世界的“流”似乎就是按
照物理世界的“水流”创造的。
CSS世界构建的基石是HTML，而HTML最具代表的两个基石

和 正好是CSS
世界中块级元素和内联级元素的代表，它们对应的正是图 1-3 所示的盛水容器中的水和木头，
其特性表现也正如现实世界的水和木头，如图 1-4 所示。

所以，所谓“流”，就是 CSS 世界中引导元素排列和定位的一条看不见的“水流”。

流是如何影响整个 CSS 世界的

（1）擒贼先擒王。因为 CSS 世界的基石是 HTML，所以只要让 HTML 默认的表现符合“流”，
那么整个 CSS 世界就可以被“流”统治，而事实就是如此！
（2）特殊布局与流的破坏。如果全部都是以默认的“流”来渲染，我们只能实现类似 W3C
那样的文档网页，但是，实际的网页是有很多复杂的布局的，怎么办？可以通过破坏“流”来
实现特殊布局。实际上，还是和“流”打交道。
（3）流向的改变。默认的流向是“一江春水向东流”，以及“飞流直下三千尺”。然而，这
种流向我们是可以改变的，可以让 CSS 的展现更为丰富。因此，“文档流从左往右自上而下”
这种说法是不严谨的，大家一定要纠正过来。

什么是流体布局

所谓“流体布局”，指的是利用元素“流”的特性实现的各类布局效果。因为“流”本身
具有自适应特性，所以“流体布局”往往都是具有自适应性的。但是，“流体布局”并不等同于
“自适应布局”。“自适应布局”是对凡是具有自适应特性的一类布局的统称，“流体布局”要狭
窄得多。例如，表格布局也可以设置为 100%自适应，但表格和“流”不是一路的，并不属于“流
体布局”。
CSS 中最常用的魔法石，也就是最常使用的 HTML 标签，是

，而

是典型的
具有“流”特性的元素，因此，曾经风靡的“div+CSS 布局”，实际上指的就是这里的“流体
布局”