一、什么是 BFC
BFC(block formatting context）：简略来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。
中文常译为块级格式化上下文。是 W3C CSS 2.1 标准中的一个概念，它决定了元素如何对其内容进行定位，以及与其余元素的关系和相互作用。在进行盒子元素布局的时候，BFC 提供了一个环境，在这个环境中依照肯定规定进行布局不会影响到其它环境中的布局。比方浮动元素会造成 BFC，浮动元素外部子元素的次要受该浮动元素影响，两个浮动元素之间是互不影响的。也就是说，如果一个元素合乎了成为 BFC 的条件，该元素外部元素的布局和定位就和内部元素互不影响(除非外部的盒子建设了新的 BFC)，是一个隔离了的独立容器。（在 CSS3 中，BFC 叫做 Flow Root）
二、造成 BFC 的条件
1、浮动元素，float 除 none 以外的值；
2、相对定位元素，position（absolute，fixed）；
3、display 为以下其中之一的值 inline-blocks，table-cells，table-captions；
4、overflow 除了 visible 以外的值（hidden，auto，scroll）
三、BFC 常见作用
1、蕴含浮动元素
问题案例：高度塌陷问题：在通常状况下父元素的高度会被子元素撑开，而在这里因为其子元素为浮动元素所以父元素产生了高度坍塌，高低边界重合。这时就能够用 bfc 来革除浮动了。
2、不被浮动元素笼罩
问题案例：div 浮动兄弟遮蔽问题：因为左侧块级元素产生了浮动，所以和右侧未产生浮动的块级元素不在同一层内，所以会产生 div 遮挡问题。能够给蓝色块加 overflow: hidden，触发 bfc 来解决遮挡问题。
3、BFC 会阻止外边距折叠
问题案例：margin 塌陷问题：在规范文档流中，块级标签之间竖直方向的 margin 会以大的为准，这就是 margin 的塌陷景象。能够用 overflow：hidden 产生 bfc 来解决。