什么是BFC？

前言：
面试时，被问到BFC，多数只知道个大概的概念，不知其所用，今理一番。

什么是BFC？
BFC的全称为块格式化上下文（Block Formatting Context，BFC），block即块，可以理解为一个简单的盒模型的上下文渲染环境。其作用是其内部元素的布局不受外部元素影响，通过触发BFC，从而实现布局上的需求或者解决一些问题。

如何触发BFC？

• 根元素 ，也就是html根标签
• 浮动元素：float的值非none
• overflow的值非visible
• 定位元素：position的值 fixed / absolute
• display 的值inline-display、table-cell、table-caption、flex、inline-flex
• …

BFC的场景应用：

1. 防止margin出现重叠

代码如下：
CSS:

.div1 {
	width: 200px;
	height: 100px;
	background: lightpink;
	margin-bottom: 10px;
}
.div2{
	overflow: hidden;
}
.div2-son{
	width: 200px;
	height: 100px;
	background: skyblue;
	margin-top: 50px;
}

HTML:

<div class="div1"></div>
<div class="div2">
	<div class="div2-son"></div>
</div>

结果如图：

2. BFC区域内计算高度时会自动计算浮动元素。

如果不给父元素设置一个高度的话，子元素设置浮动后，子元素并不能将父元素的高度自动撑起来，这个时候给父元素设置一个overflow：hidden属性后，就可以起到清除浮动的作用

代码如下：
CSS：

.container{
	background-color: skyblue;
}
.c-box{
	height: 100px;
	width: 100px;
	background: lightpink;
	float: left;
	margin: 10px;
}

HTML:

<div class="container">
	<div class="c-box"></div>
	<div class="c-box"></div>
</div>

效果如图：

3. 两栏布局，BFC的区域不会与浮动容器发生重叠

代码如下：
CSS:

#d1,#d2{
	width: 200px;
	height: 66px;
	border: 1px solid skyblue;
	box-sizing: border-box;
}
#d1{
	float: left;
	background: lightpink;
}
#d2{
	width: 400px;
	height: 100px;
	background: #87CEEB;
}

HTML:

<div id="d1">
	1
</div>
<div style="overflow: hidden;">
<div id="d2">
	2
</div>

效果如下：