特性：

（1）形成BFC的元素，会在垂直方向叠加margin  （说明不形成BFC的话，父子元素和同级元素都会在垂直方向重叠margin）

（2）形成BFC的元素，不会与浮动元素重叠

（3）形成BFC的元素，不会影响外面的布局；外面的布局也不会影响BFC内部布局

（4）形成BFC的元素的高度会将浮动元素计算在内。

形成BFC的条件

（1）根标签

（2）float为left|right;

（3）position为absolute|fixed

（4）overflow为hidden|scroll|auto;

（5）dispaly为inline-block

案例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>BFC外边距重叠</title>
    <style type="text/css">
      .box1{
        width: 100px;
        height: 100px;
        background-color: red;
        margin-bottom: 30px;
      }
      .box2{
        width: 100px;
        height: 100px;
        background-color: yellow;
        margin-top: 70px;
      }
      .parent{
        /* 触发bfc */
        /* display: inline-block; */
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="box1"></div>
    </div>
    <div class="box2"></div>
  </body>
</html>

BFC块级格式化上下文--小技巧_外边距

案例2

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>浮动不会和BFC外边距重叠</title>
    <style type="text/css">
      .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
        margin-bottom: 30px;

        float: left;
      }

      .box2 {
        width: 200px;
        height: 200px;
        background-color: yellow;
        margin-top: 70px;
        /* 两种方式触发bfc */
        /* float: left; */
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>
</html>


BFC块级格式化上下文--小技巧_BFC_02

案例3

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>浮动子元素参与高度计算</title>
    <style type="text/css">
      .parent{
        /* 3种触发bfc渲染模式 */
        overflow: hidden;
        /* float: left; */
        /* display: inline-block; */
      }
      .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
        margin-bottom: 30px;

        float: left;
      }

      .box2 {
        width: 200px;
        height: 200px;
        background-color: yellow;
        margin-top: 70px;

        float: left;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </body>
</html>

BFC块级格式化上下文--小技巧_块级格式化上下文_03