一、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。
代码地址
网友评论