BFC解析的解析与BFC常用于解决的问题

前言

在前端一直有这么一个知识点，很多前端开发者都知道有它的存在，可是却对其的理解说得不清晰。这个知识点，就是BFC，又称块级格式化上下文。本文对BFC是什么，怎么使用做了详细的解析，并记录于此。

一、BFC的定义

BFC 全称：Block Formatting Context，名为 “块级格式化上下文”。

W3C官方解释为：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。

简单来说就是，BFC是一个完全独立的空间（布局环境），其内部的元素布局是不受外界的影响，独立空间里的子元素（其内部元素）也不会影响到外面的布局。

对与外界毫无相关的独立环境的理解

官方文档有这么一句话：A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.

大概意思就是：一个块级格式化上下文包含创建它的元素内部的所有内容，但不包含创建新块格式化上下文的子元素内部的所有内容。

只看翻译也不一定能理解这句话，talk is cheap, show me the code，说不明白，就用代码演示。

<div class="box1" id="bfc1">
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4" id="bfc2">
        <div class="box5"></div>
        <div class="box6"></div>
    </div>
</div>

用这段代码解释上面那句话，#bfc1是一块BFC区域，这块区域包含了其子元素box2、box3、box4（即#bfc2），同时#bfc2也创建了一块BFC区域，包含了其子元素box5、box6。box5,box6不是#bfc1的子元素。

重点：

每一个BFC区域只包括其子元素，不包括其子元素的子元素。
每一个BFC区域都是独立隔绝的，互不影响。

二、BFC的特点

BFC是一个块级元素
BFC是页面中的一个隔离的独立容器，容器里的子元素与外部元素，互不影响
垂直方向的距离由margin决定。（属于同一个BFC的两个相邻子元素的margin会发生重叠）
BFC的区域不会与float box重叠
计算BFC的高度时，浮动元素也参与计算，浮动元素会被限制在独立空间里而撑起高度

注意：html根元素是BFC，body元素不是BFC。

三、如何触发BFC

浮动float的值不是none
position的值不是static或者relative
display的值是inline-block、flex、flow-root、table-cell、table-caption或者inline-flex
overflow的值不是visible，可以是hidden，auto，scroll

四、BFC的常用于解决的问题

1、解决子元素外边距的穿透（包含塌陷）

只给子元素设置外边距时，子元素的外边距会穿透父元素，导致父元素盒子内部的布局影响到了外部，从而影响父元素的样式。根据之前提到的BFC特点的第二点：BFC是页面中的一个隔离的独立容器，容器里的子元素与外部元素，互不影响。此时触发父元素为BFC，其子元素的样式与外界隔离，就不会影响外部父元素的样式了。