对BFC的理解和创建

一、定义

1、BFC是Block（块） Formatting（格式化） Context（内容）的简写，意思就是块级格式化上下文。就是一个独立的块级渲染区域，该区域拥有自己的渲染规则，与区域外部没关系；
2、界面渲染完后，切到调试模式，按ctrl+shift+c再用鼠标移动界面上，可以清晰的看到每个盒子结构都是独立的，父级盒子的高度都是饱和的；

二、为什么要学习和理解BFC

1、第一种情况，浮动会脱离文档流，导致父级元素高度为零，后面的盒子也随着受影响。

<style type="text/css">
  .child {
     float: left;
     width: 100px;
     height: 100px;
     background: #FF0000;
  }

  .child+.child {
     margin-left: 5px;
  }
  .test{
     background: #00FFFF;
     width: 600px;
     height: 100px;
   }
</style>
<div class="content">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>
<div class="test">00009</div>

从结果来看，由于脱离文档流，导致父级content是没有高度的，影响还是很明显的，这个时候让父级content形成BFC就能完美解决这个问题。

2、margin带来的塌陷问题

.parentBox{
    width: 300px;
    height: 300px;
    background-color: red;
}
.sub{
    width: 100px;
    height: 100px;
    background-color: #00FFFF;
    margin-top: 20px;
}

<div class="parentBox">
    <div class="sub"></div>
</div>

只是给子元素添加了margin-top:20px，但是父级元素向下偏移了20px，这个就是margin塌陷，给父级元素创建BFC即可。
结论：既然有BFC这个概念，肯定是可以解决某些问题或者优化开发，要不然就没有它存在的意义。

三、如何创建BFC

1、display:inline-block可以创建BFC，但是这样将元素改成了行内块级；

.parentBox{
   display: inline-block;
}

2、父级元素添加浮动，这样父级元素多了一个浮动，但是给父级的父级有多了一个负作用；

.parentBox{
  float: left;
}

3、通过定位position，只要不是static或者relative就可以形成BFC；

.parentBox{
  position: fixed;
  // position: absolute;
}

4、弹性布局flex也是可以创建BFC的

.parentBox{
  display: flex;
  //display: inline-flex;
}

5、overflow:hidden可以创建BFC，这种方式也是比较主流的创建BFC的方式；

.parentBox{
  overflow: hidden;
}

结论： 通过以上方式几种方式可以都可以创建BFC，overflow:hidden;是不会产生负作用的一种方式，当然在实际开发中，可以结合当前布局来选择适合的方式；