【面试题】 CSS BFC是什么？

一、 什么是BFC

BFC 全称 Block Formatting Context ，字面意思是块格式化上下文，是块盒子布局的过程中发生的区域，也是浮动元素与其他元素交互的区域。

二、 BFC 特性

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

一个BFC的范围 包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内部元素。
一个元素不能同时存在于两个BFC中。 因为如果一个元素能够同时处于两个BFC中，那么就意味着这个元素能与两个BFC中的元素发生作用，就违反了BFC的隔离作用。

三、BFC 布局规则

1. 内部盒子在垂直方向上进行排列
2. 属于同一个BFC的 两个相邻Box的 上下margin会发生折叠
3. BFC的区域不会与float的元素区域重叠（阻止元素被浮动元素覆盖）
4. 计算BFC的高度时，浮动子元素也参与计算（清除内部浮动）

三、 什么会触发BFC

1. 根元素
2. float
3. 绝对定位元素 （position的值为absolute fixed）
4. display 为 inline-block、table-cells、flex
5. overflow 除了 visible 以外的值 ，如hidden、auto、scroll

四、BFC 应用

1. 解决相邻元素的margin 合并
   margin 塌陷产生的原因是因为，在同一BFC下，两个相邻的Box margin会发生折叠。那么让他们不在同一个bfc下面不就行。由BFC的范围可以知道一个BFC的范围只包括他以及他的子元素，并不包括子元素的下属内容。

示例：

.slb{

	width: 100px;
	
	height: 100px;
	
	margin: 50px;
	
	border: 1px solid;

}
```html
<div class="box">
	
	<div class="slb"></div>
	
	<div class="slb"></div>

</div>

// 上述两个slb之间的margin 实际是50px

现在我们将第二个slb元素新建一个BFC

.cont{

	overflow: hidden; // 核心代码

}

.slb{

	width: 100px;
	
	height: 100px;
	
	margin: 50px;
	
	border: 1px solid;

}
```html
<div class="box">

	<div class="slb"></div>
	
	<div class="cont"> //核心代码 产生了一个新的 BFC
	
		<div class="slb"></div>
	
	</div>

</div>

2. 解决父子元素的margin 塌陷
   与上面同理，给父元素添加overflow: hidden
3. 清除浮动（原理是计算BFC高度的时候，浮动元素也参加计算）
4. 实现两栏布局（BFC元素不会和float元素重叠）

	*{

	margin: 0;
	
	padding: 0;

	}
.left{

	width: 300px;
	
	height: 200px;
	
	background-color: darkblue;
	
	float: left;

}

.right{

	height: 200px;
	
	background-color: darkorange;
	
	/* 创建BKF */
	
	overflow: hidden;

}

```html
<div class="total">
	
	<div class="left"></div>
	
	<div class="right"></div>

</div>

right 元素如果没有创建bkf的话，其左侧会与left元素重叠