Just Sword Wang's Blog

答网友关于CSS中的一些问题

上周有位网友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提供评论支持,如果评论长时间未加载,请飞跃长城。