最近对一些基础知识进行了整理，下面是针对 BFC 的一些整理以及本人对 BFC 的一些理解。
1. 首先，什么是 BFC 呢？
BFC，Block formatting context，直译为“块级格式化上下文”。
**在说 BFC 之前，我们首先要弄懂什么是 formatting context？ **
fomating context：格式化上下文，是W3C CSS2.1规范中的一个概念，拥有一套渲染规则。对内来约束其内块级元素的布局，对外来控制和外部元素的布局。通俗一点的讲，它就是页面中的一块渲染区域，规定了其子元素将如何定位，以及和其他元素的关系和相互作用。
最常见的 Formatting context 有 Block fomatting context (简称 BFC ) 和 Inline formatting context (简称 IFC )。
CSS2.1 中只有BFC和IFC, CSS3中还增加了GFC（GridLayout Formatting Contexts，直译为"网格布局格式化上下文"）和FFC（Flex Formatting Contexts，直译为"自适应格式化上下文"）。IFC、GFC、FFC 在这里就不进行详细解释了。
既然有四种渲染规则，那么我们就需要知道在什么情况下会采用哪种渲染规则，box 作为 css 布局的对象和基本单位，它的类型，由其元素的类型和 display 属性决定。不同类型的 box，会参与不同的 fomating context（一个决定如何渲染文档的容器），以不同的方式渲染。那么，都有哪些类型的盒子呢？
① block-level box : display属性为block, list-item, table的元素，会生成block-level box，参与BFC。
② inline-level box: display属性为inline, inline-block, inline-table的元素，会生成inline-level box，参与IFC。
③ run-in box : run-in : 根据上下文决定对象是内联对象还是块级对象。（CSS3）
block：块级元素，默认不加修饰的情况下块级元素并不会被收缩包裹其内容，其宽会充斥父元素，高度由自身内容撑开（inline 行内元素会“收缩包裹” 其内容，并且会尽可能包紧）。每个块级元素即使设置了宽度，不占满父元素也会自己占据一行，不让其后元素与自己并行。
说了这么多，我们回到正题：
BFC 就是一个独立的渲染区域，规定了Block-level内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
通俗一点的讲， BFC 就是相当于一个把浮动元素框起来并隔离的容器，容器里面的子容器不会影响到外面的元素，使浮动不会溢出。
2. BFC 布局规则
- 内部的 box 会在垂直方向，一个接一个的放置。
- 每个元素的 margin box 的左边，与包含块 border box 的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动，也是如此。
- BFC 的区域不会与float box 重叠。
- BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也是如此。
- 计算 BFC 的高度时，浮动元素也参与计算
3. 哪些元素会生成 BFC ？
- 根元素
- float 的值不为 none
- overflow 的值不为 visible
- display 的值为 inline-block、table-cell、table-caption、flex、inline-flex
- position 的值为 absolute、fixed
4. BFC 的作用及原理
（1） 自适应两栏布局
代码：
body {
position: relative;
}
.aside {
width: 300px;
height: 200px;
float: left;
background: #f66;
}
.main {
height: 250px;
background: #fcc;
overflow: hidden; /* 通过触发main生成BFC， 来实现自适应两栏布局，BFC的区域不会与float box重叠 */
}
<div class="aside"></div>
<div class="main"></div>
（2） 清除内部浮动
代码：
.par {
border: 5px solid #fcc;
width: 300px;
overflow: hidden; /* 触发par生成BFC，那么par在计算高度时，par内部的浮动元素child也会参与计算 */
}
.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
（3） 防止垂直 margin 重叠
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
代码：
/* 若没有 .wrap ，会发生 margin 重叠，两个p上下之间的距离为30px */
/* 在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。 */
.wrap {
overflow: hidden; /* 防止垂直margin重叠 */
}
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 30px;
}
<p>Haha</p>
<div class="wrap">
<p>Hehe</p>
</div>
总结
因为 BFC 内部的元素和外部的元素绝对不会互相影响，因此，当 BFC 外部存在浮动时，它不应该影响 BFC 内部的 Box 的布局，BFC 会通过变窄而不与浮动有所重叠。同理，当 BFC 内部存在浮动时，为了不影响外部元素的布局，BFC 计算高度时会包括浮动的高度，也因此，避免了 margin 重叠的产生。
想看以上例子的网页实现效果，请点这里