什么是BFC

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC布局规则

1. 在BFC元素中，里面的元素从顶端开始垂直一个个排列。
2. BFC的元素垂直方向的距离由Margin决定，属于同一个BFC内的两个相邻的元素的margin会发生重叠。
3. BFC的元素不会与浮动的元素产生交集，而是紧贴浮动边缘。
4. 计算BFC高度时候，自然会检测浮动或者定位的盒子高度。
5. 简而言之，触发了BFC的元素，是一个独立的渲染区域，不受外界干扰，外界也不受其里面的布局干扰。

BFC解决了什么问题

• 外边距重叠
  css部分

        .top{
            width: 400px;
            height: 100px;
            margin-bottom: 30px;
        }

        .bottom{
            width: 400px;
            height: 100px;
            margin-top: 10px;
        }

html部分

    <div class="top">
        margin-bottom: 30px;
    </div>
    <div class="bottom">
        margin-top: 10px;
    </div>

image.png

理想上两个div的间距是40个px，实际展示是30px。边距发生重叠。使用bfc可以解决这个问题。该问题命中布局规则2. 因此要给他们创建不同的bfc内。修改html为一下代码， 增加一层div，切设置overflow 不为visible

    <div class="top">
        margin-bottom: 30px;
    </div>
    <div style="overflow: auto;">
        <div class="bottom">
            margin-top: 10px;
        </div>
    </div>

• 盒子塌陷
• 清除浮动
• 文字环绕