BFC到底是什么

页面上的所有内容都是格式设置上下文的一部分，或者是定义为以特定方式布局内容的区域的一部分。块格式设置上下文 （BFC） 将根据块布局规则布置子元素，弹性格式设置上下文将其子元素作为弹性项进行布局，依此类推。每个格式设置上下文都有关于布局在该上下文中的行为方式的特定规则。

在哪一些情况下会创建新的BFC

在以下情况下会创建新的 BFC：

• 元素，使用浮点数浮动
• 绝对定位的元素
• 元素显示： 内联块
• 表单元格或包含 的元素，包括在使用属性时创建的匿名表单元格display: table-celldisplay: table-*
• 表标题或元素display: table-caption
• 块元素，其中具有非值overflowvisible
• 元素，其中包含 或display: flow-rootdisplay: flow-root list-item
• 元素，其中包含：布局，或contentstrict
• 弹性项目
• 网格项
• 多孔容器
• 列跨度设置为all

BFC有什么用处

1.能解决外边距的问题

外边距折叠（Margin collapsing）会发生在属于同一BFC的块级元素之间

解决办法

给父元素添加overflow：hidden；

html

 <div class="box1">设置margin-bottom:10px</div>
    <div class="box2">设置margin-top:10px</div>

css：

  div {
            color: aliceblue;
            /* font: 14px/80px '宋体'; */
        }

        .box1 {
            width: 100px;
            height: 100px;
            background-color: brown;
            margin-bottom: 10px;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            margin-top: 10px;
        }

两个盒子的外边距发生了重叠这时我们就可以让这两个div分属于不同的BFC，或者只要把其中一个div放到BFC中就可以。原因是：BFC就是页面上的一个隔离的独立容器，容器里面的元素不会对外边产生影响。

/*html*/
 <div class="big">
        <div class="box1">设置margin-bottom:10px</div>
    </div>

    <div class="box2">设置margin-top:10px</div>


/*  css*/
   div {
            color: aliceblue;
            /* font: 14px/80px '宋体'; */
        }

        .box1 {
            width: 100px;
            height: 100px;
            background-color: brown;
            margin-bottom: 10px;
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            margin-top: 10px;
        }

        .big {
            overflow: hidden;
        }

 

 参考网页：MDN文档