BFC与IFC

 

在解释BFC是什么以前，咱们先介绍另外两个概念：Box和Formatting Context。

Box

“Box”这个单词的意思就是“盒子”。

咱们的网页是由不少个HTML元素组成的。了解过CSS盒模型的都应该知道，里面有一个概念就是把网页里一个一个的元素看做是一个一个的盒子，一个网页就能够看做是由不少个盒子组成的，换一个洋气的说法，那么就是——

一个网页是由不少个Box组成的。

同时，咱们的元素又分为块级元素和行内元素，而它们二者之间又能够经过CSS属性“display”来相互进行转换。

因此，咱们HTML元素的类型和“display”的属性，决定了咱们Box（盒子）的类型。而不一样类型的Box会参与到不一样的Formatting Context中，不一样的Formatting Context会让Box内的元素用不一样的方式去渲染。

Formatting Context

“格式化上下文”，Formatting Context 是W3C在CSS2.1中提出的一个概念。

什么是“上下文”？

上下文定义了元素在CSS中所处的环境。

什么是“格式化”？

格式化则代表了在这个环境中，处于此环境中的元素都应该被初始化。

因此，“格式化上下文”实际上它是指一块独立的渲染区域，在它的渲染区域里，有一套本身的渲染规则，决定着内部子元素如何定位布局以及它自身与其余元素之间的关系和相互做用。

咱们如今比较常见的Formatting Context是Block Formatting Context（BFC）和 Inline Formatting Context（IFC）。

CSS2.1中只有 BFC 和 IFC，CSS3 中还增长了 GFC 和 FFC。

 

BFC（Block Formatting Context）块级格式化上下文

结合上面提到的Formatting Context的概念，那么BFC的意思其实就是 一个只有块级元素参与的独立渲染区域。

举个栗子：

　　咱们把咱们的页面看做是一个集装箱，如今我和你两我的都分别有一批货物要放进集装箱内。当我第一个进去放的时候，我能够选择随意的摆放个人货物，横着排，竖着排，斜着排。可是我摆放货物的位置，就直接影响到了你后面进来摆放货物的位置。因此，咱们须要一个办法，既能让我按照我本身的规则去摆放个人货物，同时又不影响你的货物位置的摆放。

　　因而我在集装箱里用笔划分出了一块属于个人区域，在个人这块区域里，我能够按照个人规则去摆放个人货物，无论我怎么摆放，你的货物都只能从个人区域线外开始摆放。因此，个人货物的摆放位置对你没有任何影响。

　　那么，我用笔划分出来的这一块属于个人区域，就是个人BFC。

BFC的定义

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域（建立了BFC的元素就是一个独立的盒子），只有Block-level box参与， 它规定了内部的Block-level Box如何布局，且与区域外部其余元素互不影响。

怎么造成BFC

• 根元素
• float属性不为none
• position为absolute或fixed
• display为inline-block, table-cell, table-caption, flex, inline-flex
• overflow不为visible

BFC的布局规则

咱们回到集装箱的栗子。

虽然我有我本身的一块区域了，可是在个人区域里也有一套我本身的一套摆放规则。好比易碎物品不能放在其余箱子下面，容易受潮的货物又应该放在什么位置等等......

因此，在BFC里也有一套他的布局规则。

1. 内部的Box会在垂直方向，一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发⽣生重叠。
3. 每一个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，不然相反)。即便存在浮动也是如此。
4. BFC的区域不会与float box重叠。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6. 计算BFC的高度时，浮动元素也参与计算
7. 须要触发，才能实现独立的运行环境

 

IFC（Inline Formatting Context）行内格式化上下文

IFC和BFC同样，既不是属性也不是元素，而是一种环境，一种上下文。

怎么造成IFC

只要有行内元素的出现，就会产生IFC。

IFC的布局规则

1. 框（boxes）一个接一个地水平排列，起点是包含块的顶部；
2. 水平方向上的margin，border和padding在框之间获得保留；
3. 框在垂直方向上能够以不一样的方式对齐：它们的顶部或底部对齐，或根据其中文字的基线对齐；
4. 包含那些框的长方形区域，会造成一行，叫作行盒(line box)；
5. 一个行框的宽度由包含它的元素的宽度和包含它的元素里面有没有float元素来决定，高度的肯定由行高度计算规则决定；

line box行盒

一横排的行内元素在垂直方向上有不少种对齐方式：底部或顶部对齐，或者根据文字的基线对齐。他们对齐后的外围造成的一个矩形的区域，就叫作一个line box（行盒）。

除了IFC之外，对于inline-level box（行内元素）排版而言另外一个重要的对象，就是line box。

一个line box的宽度由包含它的元素的宽度和包含它的元素里面有没有float元素来决定，高度的肯定由行高计算规则决定。

其实这句话解释了为何行内元素是不能设置垂直方向的padding、margin等的缘由。由于即便设置了，也不会影响line box的高度,可能会在每一个浏览器的表现各异，但大多数不会达到预期的效果。