本篇文章给大家分享的是有关如何理解W3C CSS2.1规范中的Formatting context，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
我们把网页看作是由很多个盒子组成的，而这些盒子的展示方式，就是由display这个属性来决定的。
这里出现了一个概念，叫做Formatting context（格式上下文）：
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，有一套渲染规则决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
Block fomatting context (BFC）：块级格式化上下文
Inline formatting context (IFC）：行内格式化上下文
Flex formatting context（FFC）：CSS3中的flex布局
Grid formatting context（GFC）：CSS3中的Grid布局
相信很多人了解到BFC这个概念，都是因为在思考为什么这样做可以“清除浮动”而搜索到了和BFC有关的结果。那么我们先来拓展一下：
Q：浮动的时候，文字是不会重叠的，为什么?
来源于网络的答案：
使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。
Q：为什么用clear属性可以清除浮动？
首先有一个前提，clear属性只能赋给块级元素才可能会有效果。三门峡妇科医院http://www.smxrlyy.com/
然后来自MDN：
当应用于不浮动的块时，它将这个块的边框边界移动到所有相关浮动元素外边界的下方。这个行为作用时会导致margin collapsing不起作用。
当应用于浮动元素时，它将元素的外边界移动到所有相关的浮动元素外边界的下方。这会影响后面的浮动元素的位置无法高于它之前的元素。
另外一种最常用的就是使用overflow:hidden来进行清除浮动，而它的原理就和BFC有关。
浮动元素，float 除 none 以外的值
绝对定位元素，position为absolute/fixed。
display为以下其中之一的值inline-blocks、table-cell、flex、table-caption或者inline-flex。
overflow除了visible以外的值（hidden，auto，scroll）。
fieldset元素
如果形成了BFC，就形成了一个单独的块。块和块之间不会出现干扰，所以浮动的元素块不会重叠。
下面是搜索了一些来源于网络的特性：
如果这两个相邻的块框不属于同一个BFC，它们的外边距就不会叠加。（margin collopse）证实出来的结果是错误的！！！
一般情况下，如下图所示，本应该是相隔40px，但是会发生重叠，结果出现的是盒子1的marginTop和盒子2的marginBottom里那个更大的距离：
margin collopse
如果我们给box1加上overflow:hidden，还是给box2加上overflow:hidden还是都加上，都无法解决这个问题。（不知是否是本人理解错误，目前我定它为错误）
BFC边框和内部贴紧子元素不发生重叠：
一个BFC的边框不能和它里面的元素的外边距重叠，所以如果给一个挨着浮动的块级格式化上下文添加负的外边距时"不起作用"??。
除了上面相邻会出现重叠外，这种父子的情况也会出现重叠。如果不给下面这个父亲盒子加上overflow，里面的孩子就永远是紧贴着父亲的边框的，并且parent会取孩子和它自己marginTop里面最大的那个值来和test隔开。
margin collapse
另外这里引用写的是“margin负值不起作用”，经过测试之后发现也是错的。
盒子高度包含了浮动元素：
创建了BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素，反之亦然，同时BFC依旧属于文档中的普通流。
就是BFC内的浮动元素可以撑起这个盒子。
BFC的区域不会与float box重叠：
也就是如果两个盒子黏在一起，一个是BFC一个是float（话说，float不也是BFC么=_=）这个时候它们不会重叠。
使用 *zoom: 1 的属性，这是一个IEhack， 因为 IE6-7 并不支持 W3C 的 BFC ，而是使用私有属性 hasLayout 。
从表现上说，hasLayout 跟 BFC 很相似。 hasLayout 自身存在很多问题，导致了IE6-7 中一系列的 bug。
display: flex;
display: inline-flex;
以下来源于网络：
Flexbox 不支持 ::first-line 和 ::first-letter 这两种伪元素
vertical-align 对 Flexbox 中的子元素 是没有效果的
float 和 clear 属性对 Flexbox 中的子元素是没有效果的，也不会使子元素脱离文档流(但是对Flexbox本身是有效果的！)
多栏布局（column-*） 在 Flexbox 中也是失效的，就是说我们不能使用多栏布局在Flexbox 排列其下的子元素
Flexbox 下的子元素不会继承父级容器的宽
以上就是如何理解W3C CSS2.1规范中的Formatting context，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
