BFC

什么是BFC

BFC 全称 block formatting context，中文译作「块格式化上下文」。

MDN 解释

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

下列方式会创建块格式化上下文：

• 根元素或包含根元素的元素
• 浮动元素（元素的 float不是none）
• 绝对定位元素（元素的 [position] 为 absolute 或 fixed）
• 行内块元素（元素的 display 为 inline-block）
• 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
• 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
• 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
• overflow 值不为 visible 的块元素
• display 值为 flow-root 的元素
• contain 值为 layout、content或 strict 的元素
• 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
• 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
• 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
• column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更）。

块格式化上下文包含创建它的元素内部的所有内容。

BFC的功能

BFC布局规则：

• 内部的Box会在垂直方向，一个接一个地放置。
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
• 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
• BFC的区域不会与float box重叠。
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• 计算BFC的高度时，浮动元素也参与计算

爸爸管儿子（包裹浮动元素）

用 BFC 包住浮动元素。(这不是清除浮动，.clearfix 才是清除浮动）

<div class="parent">
  <div class="son">
  </div>
</div>

.parent{
  border:10px solid red;
  min-height: 10px;
}
//flow-root 触发 BFC
.son{
  background: green;
  float:left;
  width: 400px;
  height: 100px;
}

此时父元素“parent”没有创建BFC，子元素是浮动的，所以包不住，我们给它加上一条“display:flow-root”属性，使其触发BFC：

<div class="parent">
  <div class="son">
  </div>
</div>


.parent{
  border:10px solid red;
  min-height: 10px;
  display: flow-root;
}
//flow-root 触发 BFC
.son{
  background: green;
  float:left;
  width: 400px;
  height: 100px;
}

父元素获得BFC之后立马包裹住了浮动的子元素，因此在计算BFC的高度时，浮动元素也要参与计算。

兄弟之间划清界限

有一对兄弟 div，其中一个加了浮动，那么两个 div 会重叠一部分。

<div class="gege">哥哥</div>
<div class="didi">弟弟</div>

.gege{
  width: 100px;
  min-height: 600px;
  border: 3px solid red;
  float: left;
  margin-right: 20px;
}

.didi{
  min-height: 600px;
  border: 5px solid green;
}

让另一个 div 创建 BFC，那么这两者就会界限分明。

<div class="gege">哥哥</div>
<div class="didi">弟弟</div>

.gege{
  width: 100px;
  min-height: 600px;
  border: 3px solid red;
  float: left;
  margin-right: 20px;
}

.didi{
  min-height: 600px;
  border: 5px solid green;
  display: flow-root;
}

清除浮动

• BFC 和清除浮动没什么关系，是两个不同的东西。
• 如需清除浮动，请在父元素加 clearfix

<div class="parent clearfix">
  <div ></div>
</div>

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

总结

不要试图讲清楚BFC是什么，因为BFC是一个比较难定义的东西，关于BFC是什么最好通过例子来回答：

• 用BFC可以做清除浮动该做的东西，用BFC可以包住浮动元素。
• 用BFC可以使两个相邻元素互不干扰，做左右自适应布局。