目录

  1. BFC
    1. 理解
    2. BFC生成
    3. BFC的约束规则
    4. BFC的用处
      1. 防止发生因浮动导致的高度塌陷
        1. 防止margin重叠
  2. IFC
    1. 什么是IFC
    2. IFC特性
    3. IFC的应用

BFC

理解

　　对CSS有了解的道友们肯定都知道盒式模型这个概念，对一个元素设置CSS，首先需要知道这个元素是block还是inline类型。而BFC就是用来格式化块级盒子，同样管理inline类型的盒子还有IFC，以及其他的FC。那首先我们就来看一下FC的概念。
　　Formatting Context：指页面中的一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。
　　BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

BFC生成

BFC(Block Formatting Context)是Web页面中盒模型布局的CSS渲染模式。它属于常规文档流。
CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC:
（1）float的值不为none
（2）position的值为absolute或者fixed
（3）display的值为table-cell、table-caption、inline-block、flex或者inline-flex的其中一个
（4）overflow的值不为visible

BFC的约束规则

浏览器对于BFC这块区域的约束规则如下：
　　生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。
　　生成BFC元素的子元素中，每一个子元素做外边距与包含块的左边界相接触，（对于从右到左的格式化，右外边距接触右边界），即使浮动元素也是如此（尽管子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。
有道友对它做了分解，我们直接拿来：
　　（1）内部的Box会在垂直方向上一个接一个的放置
　　（2）垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关。）
　　（3）每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
　　（4）BFC的区域不会与float box的元素区域重叠
　　（5）计算BFC的高度时，浮动子元素也参与计算
　　（6）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

BFC的用处

防止发生因浮动导致的高度塌陷
防止margin重叠

　　同一个BFC中的两个相邻Box才会发生重叠与方向无关，不过由于上文提到的第一条限制，我们甚少看到水平方向的margin重叠。这在IE中是个例外，IE可以设置write-mode

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# html
<div class="first-block"></div>
<div class="second-block">
    <h2>DDFE</h2>
</div>

# css
.first-block {
    background: #F44336;
    width: 200px;
    height: 200px;
}
.second-block {
    background: #00BCD4;
    width: 200px;
    height: 200px;
    overflow: hidden;   //添加溢出隐藏
}

first-block和second-block之间存在间距，这个间距是 h2 的上外边距引起的
通过把 overflow 把 second-block 元素形成一个 BFC，完美解决！

CSS 里面关于折叠的条件：
两个块元素要产生折叠现象，必须满足一个必备条件：这两个元素的 margin 必须是 相邻 的；那么如果定义相邻呢，w3c 规范，两个 margin 是邻接的必须满足以下条件：
必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个 BFC 当中。
没有inline盒子，没有空隙，没有 padding 和 border 将他们分隔开。
折叠的结果按照如下规则计算：

1
2
3
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。

IFC

　　在一个IFC中，从父级元素的顶部开始，盒子一个接一个横向排列。此时，横向的margin、borders、padding在这些盒子中都是有效的。这些盒子有可能通过不同的方式垂直对齐：1、他们底部或者顶部可以对齐，2、或者可以他们内部的文字基线可以对齐。如果一个矩形区域，包含着一些排成一条线的盒子，称为line box。

什么是IFC

　　IFC(Inline Formatting Contexts)直译为”行内格式化上下文“，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来(不受到竖直方向的 padding/margin 影响)

IFC特性

　　IFC中的linebox一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间，使得line box宽度缩短。
　　IFC中时不可能有块级元素的，当插入块级元素时（如p中插入div）会产生两个匿名块与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。

IFC的应用

　　水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。
　　垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

参考文章：
　　我对BFC的理解
　　细说CSS中的BFC