对BFC的理解

什么是 BFC：

BFC 的全称是 Block Formatting Context，块级格式化上下文。这是一个用于在盒模型下布局块级盒子的独立渲染区域，

将处于BFC区域内和区域外的元素进行互相隔离。

何时会形成 BFC：

满足下列条件之一就可触发BFC：

● HTML根元素
● position 值为 absolute 或 fixed
● float 值不为 none
● overflow 值不为 visible
● display 值为 inline-block、table-cell 或 table-caption

BFC 的应用场景：

1. 场景一：防止两个相邻块级元素的上下 margin 发生重叠 (上下margin合并问题)

属于同一 BFC 的, 两个相邻块级子元素的上下 margin 会重叠，如果想让它们不重叠，可通过让这两个相邻块级子元素分属于不同的BFC。

以下示例代码中的两个盒子的上下外边距会重合（即它们都设置了10px的外边距，我们期望它们之间的间距是 20px，但实际效果却只有 10px）：

<style>
  .box1 {
    width: 200px;
    height: 100px;
    background-color: red;
    margin-bottom: 10px; /* 下外边距为 10px */
  }

  .box2 {
    width: 200px;
    height: 100px;
    background-color: green;
    margin-top: 10px;  /* 上外边距为 10px */
  }
</style>

<div class="box1"></div>
<div class="box2"></div>



下面我们让其中一个盒子触发BFC，从而达到间隔 20px 的期望效果：

.box2 {
  width: 200px;
  height: 100px;
  background-color: green;
  margin-top: 10px;
  display: inline-block; /* 通过设置 display 为 inline-block 可以触发 BFC */
}

//通过给父盒子设置浮动触发bfc 如果不给父盒子设置float 者父盒子是没有大小的 设置之后会被子盒子撑起来
.father {
float: 'left';
	.son {
	width:300px;
	height:300px;
	background-color: red;
	float: left;
	}
}

2. 场景二：清除浮动

以下示例代码中， 容器元素 box1 的高度会没有高：

Hello,world

Hello,world

Hello,world

而通过为 box1 添加 BFC 触发条件，可以让它的高度变回正常状态：

.box1 {
width: 200px;
background-color: red;
overflow: hidden;
}

3. 场景三：实现自适应布局, 防止元素被浮动元素覆盖(左边固定, 右边自适应)

以下示例中，box2 会被设置了浮动的 box1 覆盖：

要避免这种覆盖行为，可以让 box2 触发 BFC, 实现布局效果, 左边固定右边自适应：

.box2 {
background-color: blue;
height: 600px;
overflow: hidden; /* 将 overflow 设置为非 visible 值可触发 BFC */
}
参考文章 深入理解BFC