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