块级格式化上下文（BFC）

• Block format context 块级格式化上下文
• 一块独立渲染区域，内部元素的渲染不会影响边界意外的元素

内部渲染规则：

• 内部的盒子会在垂直方向上一个接一个的放置
• 对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关
• 每个元素的左外边距与包含块的左边界相接触(从左到右)，即使浮动元素也是如此
• BFC的区域不会与float的元素区域重叠
• 计算BFC的高度时，浮动子元素也参与计算
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素， BFC 目的是形成一个相对于外界完全独立的空间，让内部的子元素不会影响到外部的元素

触发条件

float: left/right
overflow: auto/scroll/hidden
display: inline-block/inltable-cell/table-caption/table/inline-table/flex/inline-flex/grid/inline-grid
position: absolute/fixed

应用场景

1、防止margin重叠（塌陷）

<div class="my">
  <p>P1</p >
  <p>P2</p >
</div>

<style>
  .my {
    p {
      color: #f55;
      background: #fcc;
      width: 100px;
      line-height: 50px;
      text-align:center;
      margin: 50px;
    }
  }
</style>

效果如下：

P1

P2

两个 p元素之间的距离为 50px，发生了 margin 重叠(塌陷)以最大的为准，如果第一个P的margin 为20的话，两个P之间的距离还是50，以最大的为准，上边提到同一个 BFC 的俩个相邻的盒子的 margin 会发生重叠，可以在 p 外面包裹一层容器，并触发这个容器生成一个 BFC ，那么两个 p 就不属于同一个 BFC，这样就不会出现margin重叠

<div class="my">
  <p>P1</p >
  <div class="w">
    <p>P2</p >
  </div>
</div>

<style>
  .my {
    p {
      color: #f55;
      background: #fcc;
      width: 100px;
      line-height: 50px;
      text-align:center;
      margin: 50px;
    }
    /* 新的BFC */
    .w {
      overflow: hidden;
    }
  }
</style>

设置新的BFC之后边距不会重叠：

P1

P2

2、清除内部浮动