BFC(块级格式化上下文)

在官方文档到中，是这么介绍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.

简单来说，BFC就是包含本身子元素但是不包含子元素的子元素的块级上下文。

<div class="box1" id="HM_bfc1">
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5" id="HM_bfc2">
        <div class="box6"></div>
        <div class="box7"></div>
        <div class="box8"></div>
    </div>
</div>

#HM_bfc1是一块BFC区域，这块区域包含了box2、box3、box4、box5，也就是所有#HM_bfc1的子元素,但是不包含box6，7，8；而HM_bfc2创建了第二个BFC，里面包含了box6，7，8；

两个BFC是相对独立互不影响的，可以利用这一点来解决一些样式问题，比如边框塌陷，还可以用来解决浮动产生的影响。

BFC触发条件：

·body根元素

·设置浮动，不包括none

·设置定位，absoulte或者fixed

·行内块显示模式，inline-block

·设置overflow，即hidden，auto，scroll

·表格单元格，table-cell

·弹性布局，flex

（满足一个即可）