css关于常规流和浮动的两个疑问

该文 从一片文章整理而来，用于加深对常规流和浮动的理解。

一：FC和包含块是什么关系
描述：在css中，格式化上下文( Formatting context )和包含块( Containing block )是种什么关系？

我其实想说，没什么关系。如果硬要说有什么关系的话，在FC中(无论是BFC还是IFC)，元素受制于包含块，元素的宽度、排布等都取决于包含块。举一个非常极端的例子，这个问题对我而言，等同于站在一个房间中，问“这个房间里的家具的摆放和这个房间有什么关系”？。两个概念，没什么直接关系，但是显然家具放在房间这样一个环境里，怎么放自然也和房间有关。

就如同标准的类似描述：“在块格式化上下文中，框从包含块的顶部开始依次垂直放置...在行格式化上下文中，行框的宽度取决于包含块以及浮动的存在...”――而这些都是在描述格式化上下文中，包含块所起到的作用。

二：为什么BFC可以包含浮动元素
描述：浮动元素已经脱离了常规流，可是为什么又说块格式化上下文可以包含浮动元素？

我的第一反应是，为什么BFC不能包含浮动元素，换言之，在我概念中似乎这是理所当然的事。
先举一个极端的例子来简短说明什么是常规流、浮动和定位：现在一个班的学生要拍集体照，大家就按学号一个个走出来排成几排面对照相机。这就是最普通的流程。而如果中间任意一个同学要上厕所，那么那个空缺自然会被后面的同学填补上来。同学们依照既定的顺序(在代码中就是元素的顺序)依次排列。

然后摄影师觉得，某位同学站的位置有点靠后，让他上前一小步。这就是相对定位。

摄影师又觉得，某位同学太矮了，要让他直接靠边到队伍的最右边。这就是浮动。

最后，摄影师看了看镜头对老师说，你要站在这个位置。这就是绝对定位。

抛开诸多细节，CSS无非也就是做了这些事，排版引擎就如同摄影师一样依照每个学生自身高矮胖瘦的描述（没错，CSS就是描述）将他们排列出来。由于上下文(context)本来就是抽象词，这个例子里，照片在教室拍，那么环境就是教室。如果一个年纪拍集体照，那么环境就是操场，但又以每个班级为单位，班的概念就是新建的上下文环境，班中的队伍排列方式，和整个年级的排列完全无关。回到刚才的问题，首先“脱离了常规流”这种抽象语句不是指浮动和常规流毫无关系，浮动恰恰与常规流密切相关。然后，对于“块格式化上下文是描述常规流的”这样的语句，也算是一种抽象的理解者的造句，可能这就是最有疑问的地方。可能因为在CSS2标准里，块格式化上下文和行格式化上下文都是在常规流的章节中描述的，与常规流息息相关。但上下文这个概念原本的含义就类似于环境、语境，极端一些的例子：在这个世界里，会刮风，会下雨，会有地震，这些都是自然规律，描述了这个世界中规则(就像BFC和IFC描述了普通流的排布规则)，然而还是有人在这个世界上，一边迎合世界一边奉行自己的规则。我们遵循标准所描述的规则，但标准本应该更为简单，却因为严谨而人为的抽象。其实想象一下，如果是自己在写标准，会怎么样？如果你是作者，你定义了常规流，表述常规流中的元素存在于一个叫BFC的东西里，如果先前没有定义过，那么下一步，你必然是要定义什么是BFC。所以BFC和IFC出现在常规流章节中并不奇怪，而且还是真正的文档的上下文的要求。