上周有位网友simple_life(雷同学？)提了一个关于CSS的问题给我，因为当时非常忙所以没有时间回答。问题是这样的：
在css中，格式化上下文( Formatting context )和包含块( Containing block )是种什么关系？还有，浮动元素已经脱离了常规流，而块格式化上下文是描述常规流的，可是为什么又说块格式化上下文可以包含浮动元素？
总共是两个问题，简单说就是，FC和包含块是什么关系？以及，为什么BFC可以包含浮动元素？
一开始看到这两个问题时，其实我是非常迷惑的，有种不知道从何处开始回答的感觉，后来意识到可能是长期适应概念后对某些问题看的理所当然的缘故。所以现在虽然作答，但回答本身也不一定能让提出问题的人满意。
首先是，格式化上下文( Formatting context )和包含块( Containing block )是种什么关系？我其实想说，没什么关系。如果硬要说有什么关系的话，在FC中(无论是BFC还是IFC)，元素受制于包含块，元素的宽度、排布等都取决于包含块。举一个非常极端的例子，这个问题对我而言，等同于站在一个房间中，问“这个房间里的家具的摆放和这个房间有什么关系”？。两个概念，没什么直接关系，但是显然家具放在房间这样一个环境里，怎么放自然也和房间有关。
就如同标准的类似描述：“在块格式化上下文中，框从包含块的顶部开始依次垂直放置...在行格式化上下文中，行框的宽度取决于包含块以及浮动的存在...”——而这些都是在描述格式化上下文中，包含块所起到的作用。
第二个问题，浮动元素已经脱离了常规流，而块格式化上下文是描述常规流的，可是为什么又说块格式化上下文可以包含浮动元素？我的第一反应是，为什么BFC不能包含浮动元素，换言之，在我概念中似乎这是理所当然的事。另外对“块格式化上下文是描述常规流的”这样的描述也非常陌生，不知由来自哪里。
先举一个极端的例子来简短说明什么是常规流、浮动和定位：
- 现在一个班的学生要拍集体照，大家就按学号一个个走出来排成几排面对照相机。这就是最普通的流程。而如果中间任意一个同学要上厕所，那么那个空缺自然会被后面的同学填补上来。同学们依照既定的顺序(在代码中就是元素的顺序)依次排列。
- 然后摄影师觉得，某位同学站的位置有点靠后，让他上前一小步。这就是相对定位。
- 摄影师又觉得，某位同学太矮了，要让他直接靠边到队伍的最右边。这就是浮动。
- 最后，摄影师看了看镜头对老师说，你要站在这个位置。这就是绝对定位。
抛开诸多细节，CSS无非也就是做了这些事，排版引擎就如同摄影师一样依照每个学生自身高矮胖瘦的描述（没错，CSS就是描述）将他们排列出来。由于上下文(context)本来就是抽象词，这个例子里，照片在教室拍，那么环境就是教室。如果一个年纪拍集体照，那么环境就是操场，但又以每个班级为单位，班的概念就是新建的上下文环境，班中的队伍排列方式，和整个年级的排列完全无关。
回到刚才的问题，首先“脱离了常规流”这种抽象语句不是指浮动和常规流毫无关系，浮动恰恰与常规流密切相关。
然后，对于“块格式化上下文是描述常规流的”这样的语句，也算是一种抽象的理解者的造句，可能这就是最有疑问的地方。可能因为在CSS2标准里，块格式化上下文和行格式化上下文都是在常规流的章节中描述的，与常规流息息相关。但上下文这个概念原本的含义就类似于环境、语境，极端一些的例子：在这个世界里，会刮风，会下雨，会有地震，这些都是自然规律，描述了这个世界中规则(就像BFC和IFC描述了普通流的排布规则)，然而还是有人在这个世界上，一边迎合世界一边奉行自己的规则。
我们遵循标准所描述的规则，但标准本应该更为简单，却因为严谨而人为的抽象。其实想象一下，如果是自己在写标准，会怎么样？如果你是作者，你定义了常规流，表述常规流中的元素存在于一个叫BFC的东西里，如果先前没有定义过，那么下一步，你必然是要定义什么是BFC。所以BFC和IFC出现在常规流章节中并不奇怪，而且还是真正的文档的上下文的要求。
抱歉比较啰唆，可能也没能表达好，但我尽力了...最后祝你早日脱离标准苦海，毕竟这个坑挺深的...
评论加载中...
由Disqus提供评论支持，如果评论长时间未加载，请飞跃长城。