何为“流”
那究竟 CSS 世界中的“流”指的是什么呢?“流”实际上是 CSS 世界中的一种基本的定
位和布局机制,可以理解为现实世界的一套物理规则,“流”跟现实世界的“水流”有异曲同工
的表现。
现实世界中,如果我们让水流入一个容器,水面一定是平整的;我们在水里面放入物体,
如普通的木头,此时水位就会上升,木头多半浮在水面上,但只露出一点点头,如图 1-3 所示。
这些现象我们都会认为是理所当然的,因为这就是我们从小接触的一套物理规则。我们知道这
套规则,就可以理解现象,并且预知现象。例如,水量超过容器的容积很多,我们就可以预测
到水会溢出来。
感谢物理学,它让我们理解 CSS 世界的“流”就轻松多了。CSS 世界的“流”似乎就是按
照物理世界的“水流”创造的。
CSS世界构建的基石是HTML,而HTML最具代表的两个基石
世界中块级元素和内联级元素的代表,它们对应的正是图 1-3 所示的盛水容器中的水和木头,
其特性表现也正如现实世界的水和木头,如图 1-4 所示。
所以,所谓“流”,就是 CSS 世界中引导元素排列和定位的一条看不见的“水流”。
流是如何影响整个 CSS 世界的
(1)擒贼先擒王。因为 CSS 世界的基石是 HTML,所以只要让 HTML 默认的表现符合“流”,
那么整个 CSS 世界就可以被“流”统治,而事实就是如此!
(2)特殊布局与流的破坏。如果全部都是以默认的“流”来渲染,我们只能实现类似 W3C
那样的文档网页,但是,实际的网页是有很多复杂的布局的,怎么办?可以通过破坏“流”来
实现特殊布局。实际上,还是和“流”打交道。
(3)流向的改变。默认的流向是“一江春水向东流”,以及“飞流直下三千尺”。然而,这
种流向我们是可以改变的,可以让 CSS 的展现更为丰富。因此,“文档流从左往右自上而下”
这种说法是不严谨的,大家一定要纠正过来。
什么是流体布局
所谓“流体布局”,指的是利用元素“流”的特性实现的各类布局效果。因为“流”本身
具有自适应特性,所以“流体布局”往往都是具有自适应性的。但是,“流体布局”并不等同于
“自适应布局”。“自适应布局”是对凡是具有自适应特性的一类布局的统称,“流体布局”要狭
窄得多。例如,表格布局也可以设置为 100%自适应,但表格和“流”不是一路的,并不属于“流
体布局”。
CSS 中最常用的魔法石,也就是最常使用的 HTML 标签,是
具有“流”特性的元素,因此,曾经风靡的“div+CSS 布局”,实际上指的就是这里的“流体
布局”