2023-2 review: 本文写得比较早，观点和表述有欠成熟和全面（例如「完成画布布局任务」这种表述），不过当时的这种布局理论的归纳尝试还是有开创性，值得推荐。保留原味，简单批注，为重写新篇作基础 。

• 1 布局理论是什么理论？布局是任务，也有工具（如flex api），布局的理论 对象其实是 交互网页；
• 2 交互页面怎么造？有什么样的结构和形式？那造它的工具 都是一种子专业，有自己的理论； L 掌握理论才算专业入门，以一应百
• 3 交互页面 制造分了 HTML CSS 和JS三个子专业；CSS再分为 格式 （style），布局（layout），和动画； L 每个子专业都有自己的理论、工具和任务，有独特的资质点，例如 CSS的 格式 关于尺寸，色彩的专业内容
• 4 布局工具有 NF（常规流） MF（手动定位） 和后来的FLEX GRID

交互页面（网页）不是一张图片、图表或绘画，但是【现代交互页】漂亮的就像一副绘画，层次分明，色彩绚丽，还能响应用户。很难想象一张二维平面作品，背后的（起点）居然是一份结构化的HTML文档。动画不说，光页面格式化和二维空间布局都很复杂，将一条“树”转为一张平面图，CSS和浏览器需要做什么？

呈现过程技术化

Web技术发展至今，一张“漂亮的”交互页面由HTML和CSS协作「呈现」，交互操作部分则由JS实现。

HTML主要为页面内容搭脚手架——对内容进行“标记”（markup），标记种类有内容角色(p h1)、布局关系（div span）、网络语义（nav section）等；CSS则主要负责对脚手架以及架上内容进行装饰，包括布局调优。

从纯粹的用超链接（hyperlink）分享技术文档（HTML2前），到现代交互丰富的Web页（HTML5），页面**「构造和呈现技术」**起了重大的革新，这是肯定的。但页面构造和呈现的抽象原理是相似的——对内容进行标记，在显示介质上进行平面呈现。只是现代需求，页面层次更细致，功能更多。

为了更精准的进行平面呈现，必须对==呈现过程进行「技术化」==，例如CSS2到3的发展，各种块、行内概念，浮动和绝对定位等“脱流”技术，为设计师提供更多更细致的呈现控制力。

文档树与视觉树

常见的交互页不是绘画，交互页一般具有离散、逻辑分层平面二维结构，绘画为了表达意象，二维结构较为连贯连续。交互页内容的离散分层特性非常适合用树状数据结构表达，所以HTML的文档树天然适用于表达交互页的离散分层的视觉结构。CSS引入了，第一，块（block）和行内（inline），和第二，块内嵌套，基本实现一种【视觉树】。当然不能忘记视觉的起点，是CSS对所有HTML内容（text node）和树节点绘制视觉块或者叫方框（box）。

平面视觉格式化

在【HTML文档树的平面呈现】的概念和技术实现上，有几个重要但让新手困惑的概念，如visual formatting model （下称VFM）、formatting structure，中文常译为 可视格式化模型 和 格式化结构。我以为，visual 译为【可视化】词意不达，又，formatting 明显超越了文本格式化的【格式化】概念，而model 译为模型也不够妥。

visual

visual 译为原义【视觉】更好，什么叫视觉？和听觉、触觉等对比就很形象了。视觉就是指一种空间实物的平面呈现，具有一种二维结构，visual 揭示了CSS 技术的对象 是一种 平面二维图形。

formatting

“格式化”的抽象意思是将某物转化为另一种可能的更优的形态，文本格式化就是对文字的形态的转换，【视觉格式化】 则是 一种平面二维图形的 安排与设计。

文本格式的对象是「文字」，视觉格式的对象是「二维空间」，CSS的box就是视觉格式基础实现（box译为盒子是蹩脚的，应该译为平面方框、方框或者框更好）。VFM，一种【视觉框】排列定位的算法或规则。model译为模型让人错觉为模具，其实就是一种算法。

NF VFM

VFM是抽象的，NF 则这 最简单直观 的一种 实现。NF包括，块框（block box）独占一行，行框（in-line box）位于块框格式流中，块框可以作为容器（containing block）内部嵌套其它框等 格式规则。后面深入介绍，包括NF， 浮动，position，flexbox和grid不同VFM。

视觉格式化与画布布局任务

将视觉框（box）分为块框（block）和行内框（inline），并规定【块框】独占“一行”，【行框】在父块框的格式流中。

以上是最初步「视觉格式规则」，只是理解这些规则的设计，需要再深入分析。

例如，块框为啥要独占一行，独占一行是什么意思？我们必须明白，视觉格式化的对象是具有二维空间的画布，有一定宽度（width）和高度（height）。要细致格式化，必须对画布分割，分配定位单元，其实块框也可以设定为独占一列，显然设计者更直观的选择了水平分割画布。所以块框独占一行的意思和意义就很明显了。

填满整张画布注1，即为生成「交互界面」的任务注2；而画布是逻辑的，也可以是更大的画布的一个内容框。所以布局任务可以是嵌套的。

有了块内嵌套的格式规则，“独占一行”也有了抽象意义，指占据父块的一行——水平区域。整个画布只是最大的一个父块。

1 常规流（NF）视觉格式化技术

视觉格式化规则必须完整解释格式化完整张画布，所以较完整的格式规则：

块框（block）独占画布（或父块）水平一行，多个块框自上而下顺序“垒砌”，直接填满整张画布（或父块）的高度；行内框（inline）占据画布（或父块）垂直一列，多个行框从左至右“垒砌”，直到填满画布（或父块）的宽度，再换行“垒砌”。

以上规则是基本的normal flow的block inline formatting model了。

完整的画布内容「布局规则」应该是固定的，这就是布局理论。例如，具体的布局技术都会决定（提供API）画布内第一个内容框的位置——NF是靠在画布的左上边缘，position则由手动top left决定。

常规流的思想是，两种不同粒度的视框，自上而上、自左至右的“垒砌”注3，具体布局由视框的内容决定。格式化规则中“垒砌”有具体技术上的涵义，块框“垒砌”是指块框底部位置是新块框的顶部；行内框“垒砌”是指行内框的右边位置是新行内框的左边开始位置。

后来为了更细致格式化视觉画布，CSS对常规流进行局部调整技术，如position 和 float，甚至全新的格式流技术flex和grid。

P.S. CSS2S规范已经基本讲述了「常规流」完整格式化完整张画布的两条规则——BFC和IFC。有趣是，其实块框独一行，是真正的行框；行内框垂直占块框的列空间，可称为列框。概念是主要的，名字当初取得很直观，就约定俗成了。总之，常规的格式流分水平和垂直两个方向填整张画布。

2 重定位视觉格式化技术

视觉格式流技术多样化，是在常规流（完成视觉格式过程）的基础上进行调整得到的，提供更多细致灵活的格式操作。例如块框一个个按次序静态“垒砌”的（就像水从上而下的流），块框内（块框作为containing block）第一子块也是默认左上角；块框嵌套上，子视框默认最近的包含块框为它的父块框等。

其实相对于通过相邻获得一种静态位置，最细致的视觉格式化技术是提供一个别的「具体位置数据」，这就是 position 技术缘由。CSS提供基于原位置（relative）、父块（ absolute ）和视口（fixed）三种相对位置基点的定位技术。特别注意的是，relative定位是不“脱流”的注4，只是简单的在原位偏移位置，后面的视觉框知道它的存在；而另外两种是“脱流”的，在常规流中消失，新视觉框不知道它的存在。最有趣的是float 技术，它宣称把视觉框脱离出流，但是其它框还是知道它的存在。

重定位技术的核心是，第一，手动定义内容框在画布上的位置；第二，调整画布（ relative是原画布，absolute是某一个父画布，fixed是整个视口）

3 浮动定位视觉格式化技术

float官方解释说，被float的框被移动到所在行框（line box）的行头（left）或行尾（right），然后其它内容（content）会“环绕”着浮动框。【什么样的框】在什么的情况下可以被浮动，又什么样的【内容】会环绕着浮动框？常见浮动框有图片或一小段附加短文，内容多是一大段落文本。在常规流的算法里，应该只有【行内框】具有浮动的可能性了，因为块框占满了一行，不存在浮动空间；

又，像要对块框安放，要先对分割画布一样，为了安放行内框，包含块框也要进行水平分割，这是就【行框（line box）】的概念——行内框“垒砌”的起点和终点，只是【行框】是在行内框在实际布局中构建的，技术上好像没有【行框】对象，不能进行CSS或JS操作。浮动框的出现就是改变了【行框】的起点或终点来实现内容环绕效果。

EM：这里所谓“行框”是指 横向安排内容框（行内框）的NF特殊画布

EM：浮动框就是一个特殊的行内框，而行内框是相对块框的，下一个内容框（应该只能也是行为框）不用换行，它的「左起位置」是前一个行内框「右终结位置」

EM：浮动框特殊之处在，它是“脱流”的，在另一张画布上布局，说它是NF行内框是因它会影响NF流，从而产生环绕效果

行框（IFC）是行内框横向“垒砌”的起点和终点，而画布（或BFC）是块框纵向“垒砌”的起点和终点，从这个结论我们看出了，重定位技术就像是对BFC的调整，指定块框起始位置，是行向流动调整，而浮动技术就像是IFC上的调整，对“列框”重新定义了规则，是列向流动调整。两者都是对常规流的微调得到新的格式操作。而到CSS3出现了全新的非常规流技术。

EM：以上早期分析不全面。浮动布局应该说是与NF不同的布局技术，只是为达到环绕效果，两种布局实例必须有一定的“交互”。

EM：一种布局技术，它第一个要的定义是，画布起点位置在哪里，其次才是内容框的布局规则。

EM：浮动画布：浮动布局画布位置是在NF画布基础上确定的，例如左边与NF画布的左边缘重叠，而top是浮动框原NF的位置，这样才产生一个“浮动”效果。

EM：浮动框布局规则：当多个相邻的NF框被设置为float，它们分为成为同一个浮动画布的内容框，可以clear属性控制“换行”布局

EM：与NF流交互：浮动画布（框）会影响NF 行框的起始／终止位置，从而产生环绕效果；浮动画布会覆盖NF块框（因为从NF流中脱离）

• 经验分享：CSS浮动(float,clear)通俗讲解