学习BFC

学习BFC(Block Formatting Context)

什么是BFC

BFC全称是Block Formatting Context，即块格式化上下文。它是CSS2.1规范定义的，关于CSS渲染定位的一个概念。要明白BFC到底是什么，首先来看看什么是视觉格式化模型。

视觉格式化模型

视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制，它也是CSS中的一个概念。
视觉格式化模型定义了盒（Box）的生成，盒主要包括了块盒、行内盒、匿名盒（没有名字不能被选择器选中的盒）以及一些实验性的盒（未来可能添加到规范中）。盒的类型由display属性决定。

BFC的创建方法

• 根元素或其它包含它的元素；
• 浮动 (元素的float不为none)；
• 绝对定位元素 (元素的position为absolute或fixed)；
• 行内块inline-blocks(元素的 display: inline-block)；
• 表格单元格(元素的display: table-cell，HTML表格单元格默认属性)；
• overflow的值不为visible的元素；
• 弹性盒 flex boxes (元素的display: flex或inline-flex)；
  但其中，最常见的就是overflow:hidden、float:left/right、position:absolute。也就是说，每次看到这些属性的时候，就代表了该元素已经创建了一个BFC了。

BFC的范围

一个BFC包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内部元素。
这段看上去有点奇怪，我是这么理解的，加入有下面代码，class名为.BFC代表创建了新的块格式化：

<div id='div_1' class='BFC'>
    <div id='div_2'>
        <div id='div_3'></div>
        <div id='div_4'></div>
    </div>
    <div id='div_5' class='BFC'>
        <div id='div_6'></div>
        <div id='div_7'></div>
    </div>
</div>

这段代码表示，#div_1创建了一个块格式上下文，这个上下文包括了#div_2、#div_3、#div_4、#div_5。即#div_2中的子元素也属于#div_1所创建的BFC。但由于#div_5创建了新的BFC，所以#div_6和#div_7就被排除在外层的BFC之外。
这从另一方角度说明，一个元素不能同时存在于两个BFC中。
BFC的一个最重要的效果是，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。这是利用BFC清除浮动所利用的特性。
如果一个元素能够同时处于两个BFC中，那么就意味着这个元素能与两个BFC中的元素发生作用，就违反了BFC的隔离作用，所以这个假设就不成立了。

BFC的效果

就如刚才提到的，BFC的最显著的效果就是建立一个隔离的空间，断绝空间内外元素间相互的作用。然而，BFC还有更多的特性，简单归纳一下：
1、内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个的常规流）；
2、处于同一个BFC中的元素相互影响，可能会发生margin collapse；
3、每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；
4、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；
5、计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；
浮动盒区域不叠加到BFC上；

这么多性质有点难以理解，但可以作如下推理来帮助理解：html的根元素就是，而根元素会创建一个BFC，创建一个新的BFC时就相当于在这个元素内部创建一个新的，子元素的定位就如同在一个新页面中那样，而这个新旧html页面之间时不会相互影响的。
上述这个理解并不是最准确的理解，甚至是将因果倒置了（因为html是根元素，因此才会有BFC的特性，而不是BFC有html的特性），但这样的推理可以帮助理解BFC这个概念。