BFC

目前BFC已经是一个耳熟能详的词了，可是当别人问我BFC的一些相关东西时候，我还不能很有底气地去解释BFC的相关问题，所以这两天又详细阅读了一些相关资料，来与大家一起探讨一下BFC。

在说明BFC之前，我们先来了解一下Formatting context这个概念，它指的是页面中的一块渲染区域，并且有一套渲染规则，决定子元素如何定位，以及与其它元素间的关系和相互作用。比较常见的Formatting context就是Block Formatting context(BFC)和Inline Formatting context(IFC).CSS3还引入了GFC和FFC。

BFC译为“块格式化上下文”。它是一个独立的渲染区域，规定了内部的Block-level Box如何布局，且与区域外部没有关系。从样式上看，具有BFC元素与其它元素没有什么区别，但是功能上来说，BFC相当于一个隔离了的容器，容器里的元素在布局上不会影响外部元素，反之亦然。 

BFC布局规则：

1、内部Box会在垂直方向上一个接一个地放置

2、属于同一个BFC的两个相邻Box的margin会发生重叠

3、每个元素的margin box左边，与包含块的border box左边相邻（从左到右的布局）

4、BFC就是页面上一个独立的容器，里边元素不会影响外边，反之亦然

5、计算BFC元素高度时，浮动元素也参与其中

如何触发BFC？

满足以下任一条件的元素，会触发BFC：

根元素

浮动元素，float除none以外

定位元素，position为absolute或者fixed

display为以下值的：inline-block、table-cell、table-caption、flex、inline-flex

overflow除了visible以外的值(hidden、scroll、auto)

要注意的是BFC并不是元素，是元素所带有的一些属性，所以是以上这些元素产生了BFC，而并不是它们是BFC。

BFC作用及原理

根据BFC布局规则，可以解决一些常见问题：

1、清除浮动：其实也就是使用overflow:hidden和overflow:auto清除浮动的原理，使用overflow出发了浮动元素的父级元素的BFC，根据BFC布局规则5，知道BFC元素高度含内部浮动元素高度，解决了高度塌陷问题。代码示例：

<div class="par1"><div class="bfc-child"></div></div>

<div class="par2"><div class="no-child"></div></div>

style：.

par1{

overflow: hidden;

}

.par1,.par2{

border: 1px solid #ccc;

margin: 10px;

}

.bfc-child,.no-child{

float: left;

height:20px;

width: 100px;

}

效果图展示：

2、防止垂直margin重叠

根据BFC布局规则2，同属于一个BFC的两个相邻box的margin会产生重叠，以下为主要代码及效果图展示：

<div class="one"></div>

<div class="two"></div>

.one,.two{border: 1px solid red;width: 198px;height: 10px;}

.one{margin-bottom: 10px;}

.two{margin-top: 10px;} 

效果图中，两个margin之间距离为10px，产生了margin重叠

解决margin重叠就是使div.one和div.two不在同一个BFC中，给div加上一个BFC父元素。

代码：

<div class="bfc-par">

<div class="one"></div>

</div>

<div class="two"></div>

.bfc-par{

overflow:hidden;

}

效果图(两个div间距20px，解决了margin重叠问题)：