什么是BFC？

全称：Block format context 块级格式化上下文。是一块独立渲染区域，它内部元素的渲染不会影响边界外的元素

有什么用？

一般常用于：清除子元素的浮动

举例说明： 一个块元素，一个img图片

对应的样式：

    .container {
        background-color: #f1f1f1;
    }
    .left {
        float: left;
    }
    .bfc {
        overflow: hidden; /* 触发元素 BFC 的方式之一 */
    }


<div class="container bfc">
    <img src="xxxxx" class="left" style="magin-right: 10px;"/>
    <p class="bfc">某一段文字……</p>
</div>

如果容器container没有开启BFC的话，它内部的图片因为设了float会跑出去，给它的父亲加了BFC之后，即便内部的图片浮动也不会跑出去，而是把父容器撑大

如何让元素开启BFC？

(1)给这个元素也设置float，但不是none的情况，那这个元素就形成了BFC

(2)给这个元素设置position 是absolute 或 fixed ,这个元素就形成了BFC

(3)样式增加一个属性overflow，取值不是visiable的值，这个元素就形成了BFC

(4)display是flex /inline-block等