block formatting context块级格式化上下文
    bfc是一个独立的渲染区域，只有block-level box参与，它规定了内部的block-level box如何布局，并且与这个区域外部毫不相干。
    BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此，包括浮动和外边距合并等等，有了这个特性我们布局的时候就不会出现意外情况了。

哪些元素会产生bfc

display属性为block、list-item、table的元素，会产生bfc。（最常用的就是块级元素）

什么情况下会触发bfc

1． 设置了float属性，并且不为none
2． position属性为absolute或fixed
3． display为inline-block、table-cell、table-caption、flex、inline-flex
4． overflow属性不为visible

bfc元素所具有的特性

1． 在bfc中，盒子从顶端开始垂直地一个接一个的排列；
2． 盒子垂直方向的距离由margin决定，属于同一个bfc的盒子的margin会重叠；
3． 在bfc中，每一个盒子的左边缘会触碰到父容器的左边缘内部，也就是说在没有margin和padding时，父border的内边和子border的外边重叠；
4． bfc的区域不会与浮动盒子产生交集，而是紧贴浮动边缘；
5． 如果父盒子没有设置高度，但子盒子中有浮动元素，那么在计算bfc的高度时， 会计算上浮动盒子的高度。

bfc的主要用途

清除元素内部浮动

    只要把父元素设置为bfc就可以清除子元素的浮动，最常见的就是给父元素添加overflow：hidden属性。
    啥意思呢，其实我有一段时间不是很明白“清除子元素浮动”这句话，人家设置的好好的浮动，你干嘛给人家清除呢，那不就是不生效了么？其实清除浮动的意思不是清除你设置的元素的浮动属性，而是清除设置了浮动属性之后给别的元素带来的影响。举个栗子：

<div class="father">
     <div class="son1"></div>
     <div class="son2"></div>
</div>

.father {
    width: 150px;
    border: 1px solid red;
}

.son1, .son2 {
    width: 50px;
    height: 50px;
    background-color: pink;
}

.son2 {
    background-color: purple;
}

正常情况下的样子是上下块撑开父元素的高度

image.png

image.png

当设置父元素bfc后，此时就清除了子元素浮动带来的影响，什么影响呢，就是不撑开父元素的高度的影响，那么父元素的高度就是子元素的高度
为父元素添加

overflow: hidden;

image.png

解决外边距合并问题

    我们知道，两个盒子在一起时，当有相邻的外边距时，会取外边距较大的那一个，也就是外边距会合并，但这种情况只发生在同属一个bfc的两个盒子中间，换言之，要想解决外边距合并问题，只要把两个盒子放在不同的bfc中即可。

制作右侧盒子自适应宽度的问题（左侧盒子宽度固定，右侧宽度不固定）

    当在父元素中只设定一个盒子浮动，另一个不浮动时，会造成第二个盒子在第一个盒子的下方，被覆盖掉一部分（但文字不会被覆盖）。

.father2 {
    width: 200px;
    border: 1px solid red;
}

.s1 {
    width: 50px;
    height: 50px;
    background-color: pink;
    float: left;
}

.s2 {
    background-color: purple;
    height: 100px;
}

image.png

给第2个元素设定bfc

.s2 {
    background-color: purple;
    height: 100px;
    overflow: auto;
    word-break: break-all;
}

image.png

当增加第一个块的宽度时，第二个块的宽度会自动缩小，实现宽度自适应。