BFC 块级格式上下文的定义、创建、特点和常见用途

BFC的定义

概况如下：

• BFC 即 Block - Formatting - Context，它是一个仅有块级盒子参与的独立渲染区域。
• BFC 规定了这个独立渲染区域内的参与元素（块级盒子）是如何布局的
• BFC 是一个独立渲染区域，与外部区域无瓜葛。

BFC的创建

若一个元素具备以下任一特性，则可创建一个新的BFC：

• 根元素
• float不为none，即 float:left 或 float:right
• position不为static,relative，即 position:absolute，position:fixed
• overflow不为visible，即 overflow:auto，overflow:hidden，overflow:scroll
• display:inline-block，display:flex，display:inline-flex，display:table-caption，display:table-cell

注意，块级盒子不创建BFC，因为它是 参与 BFC的内部元素。

BFC的特点

BFC是一个独立渲染区域，内部元素与外部毫无关系。

• ① 在一个BFC内，盒子会在垂直方向上一个接一个地排列。
• ② 在一个BFC内，相邻盒子的margin-bottom和margin-top会发生叠加，即外边距叠加(垂直方向上，相邻盒子的外边距margin会叠加)。
• ③ 在一个BFC内，每一个元素（包括浮动元素），其左外边界会紧挨着包含盒子的左边。
• ④ 在一个BFC内，若有一个内部元素生成一个新的BFC，并且有内部元素是浮动元素，该BFC不会与浮动元素的区域重叠。
• ⑤ 计算一个BFC的高度时，内部浮动元素也会参与计算。

BFC的用途

BFC的用途可与BFC的特点作一些映射和对应

① 创建BFC，从而消除垂直外边距叠加的现象

根据BFC的第二个特点：

在一个BFC内，相邻盒子的margin-bottom和margin-top会发生叠加，即外边距叠加。

有时候我们不想出现这样的现象，那么如何去避免？

注意，第二个特点的前提条件是 “在一个BFC内”。

也就是说在同一个BFC内相邻盒子才会发生这种外边距叠加的现象，那么只要让它们不在同一个BFC就好。

那就通过创建BFC，使得两个盒子不在同一个BFC内，则能消除这个现象。

例一、

<div id='wrapper'>
	<div id='a-box'>
		aaa
	</div>
	<div id='b-box'>
		bbb
	</div>
</div>

wrapper设置了overflow:hidden，创建了一个BFC。
该BFC有两个内部元素，即a块级盒子和b块级盒子。

#wrapper{
	width:200px;
	border:1px solid black;
	overflow:hidden;   
}
#a-box{
	width:50px;
	height:50px;
	margin-bottom:30px;
	background-color:red;
}
#b-box{
	width:50px;
	height:50px;
	margin-top:20px;
	background-color:pink;
}

这样的话，a和b盒子之间的margin，并不是50px，而是30px。

修改
给a-box另外加一个盒子

<div id='wrapper'>
	<div id='a-wrapper'>
		<div id='a-box'>aaa</div>
	</div>
	<div id='b-box'>bbb</div>
</div>

#a-wrapper{
	overflow:hidden
}

这样a-box就属于a-wrapper这个BFC了，b-box还是属于wrapper这个BFC，不是同一个BFC，则不会发生外边距叠加。

② 创建BFC，清除浮动带来的影响

根据BFC的第五个特点：

计算一个BFC的高度时，内部浮动元素也会参与计算。

都知道，若子元素是浮动元素，而父元素不方便设置高度的话，会发生高度塌陷这个问题。

也知道，可以通过父元素设置overflow:hidden解决高度塌陷的问题，那到底是为什么呢？

实际上，给父元素设置了overflow:hidden，相当于创建了BFC，让父元素成为了一个BFC，则父元素内的元素，都满足BFC的特点。

那么，根据 “计算BFC的高度，其浮动元素也会参与计算”，即父元素的高度会由浮动元素的高度所填充，就不会发生塌陷了。

③ 创建BFC，构建自适应两列布局

两列布局，一列固定宽度，一列是自适应。这算是老生常谈的一个布局了，它的实现原理是：

• 给side-bar设置左浮动和固定宽度
• 给main-content设置overflow-hidden

<div id='side-bar'>side bar</div>
<div id='main-content'>main content</div>

#side-bar{
	float:left;
	width:200px;
	height:200px;
	background-color:red;
}
#main-content{
	height:300px;
	overflow:hidden;
	background-color:pink;
}

那么为什么呢？

实际上也是和BFC有关。

看看BFC的第三条规则：

在一个BFC内，每一个元素（包括浮动元素），其左外边界会紧挨着包含盒子的左边。

怎么理解额，先这样看：

如果没有给main-content设置overflow:hidden，那么side-bar和main-content都是同一个BFC内的元素，效果是这样

佐证了第三点特点。

那两列布局，正是因为给main-content设置了overflow:hidden，使得其创建了新的BFC，那么其左边界挨着的就是side-bar的右边界了。

而不是和原来side-bar一样都是挨着外边盒子的左边。

设置BFC实现两列布局，实际上佐证的是第四点特点：

在一个BFC内，若有一个内部元素生成一个新的BFC，并且有内部元素是浮动元素，该BFC不会与浮动元素的区域重叠。

main-content就是新的BFC，原本BFC中的side-bar是浮动元素。确实，新创建的BFC不会与浮动元素区域重叠。