关于前端:对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;是不会产生负作用的一种形式，当然在理论开发中，能够联合以后布局来抉择适宜的形式；