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

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

 

一：FC和包含块是什么关系

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

 

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

 

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

 

 

二：为何BFC能够包含浮动元素

描述：浮动元素已经脱离了常规流，但是为何又说块格式化上下文能够包含浮动元素？

 

个人第一反应是，为何BFC不能包含浮动元素，换言之，在我概念中彷佛这是理所固然的事。

先举一个极端的例子来简短说明什么是常规流、浮动和定位：

• 如今一个班的学生要拍集体照，你们就按学号一个个走出来排成几排面对照相机。这就是最普通的流程。而若是中间任意一个同窗要上厕所，那么那个空缺天然会被后面的同窗填补上来。同窗们依照既定的顺序(在代码中就是元素的顺序)依次排列。

• 而后摄影师以为，某位同窗站的位置有点靠后，让他上前一小步。这就是相对定位。

• 摄影师又以为，某位同窗过矮了，要让他直接靠边到队伍的最右边。这就是浮动。

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

抛开诸多细节，CSS无非也就是作了这些事，排版引擎就如同摄影师同样依照每一个学生自身高矮胖瘦的描述（没错，CSS就是描述）将他们排列出来。因为上下文(context)原本就是抽象词，这个例子里，照片在教室拍，那么环境就是教室。若是一个年纪拍集体照，那么环境就是操场，但又以每一个班级为单位，班的概念就是新建的上下文环境，班中的队伍排列方式，和整个年级的排列彻底无关。

回到刚才的问题，首先“脱离了常规流”这种抽象语句不是指浮动和常规流毫无关系，浮动偏偏与常规流密切相关。

而后，对于“块格式化上下文是描述常规流的”这样的语句，也算是一种抽象的理解者的造句，可能这就是最有疑问的地方。可能由于在CSS2标准里，块格式化上下文和行格式化上下文都是在常规流的章节中描述的，与常规流息息相关。但上下文这个概念本来的含义就相似于环境、语境，极端一些的例子：在这个世界里，会刮风，会下雨，会有地震，这些都是天然规律，描述了这个世界中规则(就像BFC和IFC描述了普通流的排布规则)，然而仍是有人在这个世界上，一边迎合世界一边奉行本身的规则。

咱们遵循标准所描述的规则，但标准本应该更为简单，却由于严谨而人为的抽象。其实想象一下，若是是本身在写标准，会怎么样？若是你是做者，你定义了常规流，表述常规流中的元素存在于一个叫BFC的东西里，若是先前没有定义过，那么下一步，你必然是要定义什么是BFC。因此BFC和IFC出如今常规流章节中并不奇怪，并且仍是真正的文档的上下文的要求。