BFC块格式化上下文

一、BFC是什么

BFC(块格式化上下文): 是Web页面可视化渲染CSS的一部分, 是布局过程中生成块级盒子的区域。也是浮动元素与其他元素的交互限定区域。
简单的说BFC就是CSS渲染定位的一个概念，就是一个块级元素的渲染显示规则。

要明白BFC到底是什么，首先要了解CSS 视觉格式化模型，如果你对概念不感兴趣，可以直接跳到如何创建BFC

视觉格式化模型

CSS 视觉格式化模型（visual formatting model）是用来处理和在视觉媒体上显示文档时使用的计算规则。该模型是 CSS 的基础概念之一。

视觉格式化模型定义了盒子（Box）的生成，用于从文档元素生成盒子。盒子主要包括了块盒子、行内盒子、匿名盒子（没有名字不能被选择器选中的盒子）以及其他盒子（一些实验性的，在未来可能添加到规范中）。盒子的类型由display属性决定。

块盒子

块盒子具有以下特性：

当元素的display为blcok、list-item、table时该元素将成为块级元素
一个块级元素会被格式化成一个块（例如文章的一个段落），默认按照垂直方向依次排列
每个块级盒子都会参与块格式化上下文（block formatting context）的创建
每个块级元素都会至少生成一个块级盒子，即主块级盒子（principal block-level box）

行内盒子

行内盒子具有以下特性：

如果一个元素的 display 属性为 inline、inline-block 或 inline-table，则称该元素为行内级元素。
显示时，它不会生成内容块，但是可以与其他行内级内容一起显示为多行。一个典型的例子是包含多种格式内容（如强调文本、图片等）的段落，就可以由行内级元素组成。
行内级元素会生成行内级盒子，该盒子同时会参与行内格式化上下文（inline formatting context）的创建。所有display:inline的非替换元素生成的盒是行内盒。
不参与生成行内格式化上下文的行内级盒称为原子行内级盒(atomic inline-level boxes)。这些盒由可替换行内元素，或 display 值为 inline-block 或 inline-table 的元素生成，不能拆分成多个盒。

匿名盒子

匿名盒子分为块级匿名盒子和行内匿名盒子，因为匿名盒子没有名字，不能利用选择器来选择它们，所以它们的所有属性都为inherit或初始默认值；
如下面例子，会创键匿名块盒来包含毗邻的行内级盒：

<div>
Some inline text 
<p>followed by a paragraph</p>
 followed by more inline text.
</div>

anonymous_block-level_boxes.png

其他类型的盒子

行盒子:行盒子由行内格式化上下文创建，用来显示一行文本。
Run-in 盒子:Run-in 盒子通过 display:run-in 来定义，它可以是块盒子，也可以是行内盒子，这取决于紧随其后的盒子的类型
由其他模型引入的盒子:
①表格内容模型可能会创建一个表格包装器盒子和一个表格盒子，以及多个其他盒子如表格标题盒子等
②多列内容模型可能会在容器盒子和内容之间创建多个列盒子

定位规则

一旦生成了盒子以后，CSS引擎就需要定位它们以完成布局，盒就是定位的基本单位，在定位时，有三种常见的定位方案。

普通流：按照次序依次定位每个盒子
浮动：将盒子从普通流中单独拎出来，将其放到外层盒子的某一边
绝对定位：按照绝对位置来定位盒子，其位置根据盒子的包含元素所建立的绝对坐标系来计算，因此绝对定位元素有可能会覆盖其他元素

普通流

在常规流中，盒一个接着一个排列;
在块级格式化上下文里面，它们竖着排列；
在行内格式化上下文里面，它们横着排列;
当position为static或relative，并且float为none时会触发常规流；
对于静态定位(static positioning)，position: static，盒的位置是常规流布局里的位置；
对于相对定位(relative positioning)，position: relative，盒偏移位置由这些属性定义top，bottom，leftandright。即使有偏移，仍然保留原有的位置，其它常规流不能占用这个位置。

浮动

盒称为浮动盒(floating boxes)；
它位于当前行的开头或末尾；
这导致常规流环绕在它的周边，除非设置 clear 属性；

绝对定位

绝对定位方案，盒从常规流中被移除，不影响常规流的布局；
它的定位相对于它的包含块，相关CSS属性：top，bottom，left及right；
如果元素的属性position为absolute或fixed，它是绝对定位元素；
对于position: absolute，元素定位将相对于最近的一个relative、fixed或absolute的父元素，如果没有则相对于body；

二、BFC的创建

根元素或包含根元素的元素
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
overflow 值不为 visible 的块元素
display 值为 flow-root 的元素
contain 值为 layout、content或 strict 的元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）
其中最常见的就是overflow:hidden、float:left/right、position:absolute。也就是说，每次看到这些属性的时候，就代表了该元素以及创建了一个BFC了。

三、BFC的范围

一个BFC包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内部元素。也就是说一个元素不能同时存在于两个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中的元素相互影响，可能会发生margin collapse；
每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；
计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；
浮动盒区域不叠加到BFC上；
可以这样理解：一个html根元素<html>就会创建一个新的BFC，而创建一个新的BFC就相当于在这个元素内部创建一个新的<html>，这个新旧的html页面不会相互影响。

五、BFC的应用案例

1.使 BFC 内部的浮动元素不会到处乱跑(如：浮动，定位)

        .out{
            border: 10px solid red;
            min-height: 20px;
        }
        .in{
            background-color:darkorchid;
            height:100px;
            width: 100px;
            float: left;
        }
  <div class="out">
      <div class="in"></div>
  </div>

浮动.png

这时里面的元素使用了float，它脱离了普通文档流，如何让外成的元素包裹住内层元素呢，这时候让外层产生一个BFC就可以了。

浮动BFC.png

这就是 BFC 的第一个作用：使 BFC 内部的浮动元素不会到处乱跑。

2.和浮动元素产生边界

.divs{
            margin-top: 10px;
            border: 3px solid red;
            height: 100px;
        }
        .left{
            min-width: 200px;
            margin-right: 20px;
            float: left;
        }
        .right{
            border-color: blue;
        }
 <div class="divs left"></div>
  <div class="divs right"></div>

和浮动元素产生边界.png

在没有BFC的情况下，需要将margin-left加入到非浮动元素上，大小值为浮动元素的宽度+需要隔离的宽度，如果让非浮动元素产生BFC效果，则只需让浮动元素添加margin-right就可以了

和浮动元素产生边界1.png

六、总结

BFC的概念比较抽象，但通过实例分析应该能够更好地理解BFC。
代码地址

七、参考

视觉格式化模型_MDN
块格式化上下文_MDN