【BFC--块格式化上下文】看完这篇文章，你真的还没理解BFC吗？

目录

• BFC是什么？
• 创建BFC的条件
• BFC功能/特性
• 与清除浮动的关系
• 参考资料

一、BFC 是什么？

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

人话：CSS 不正交，这个 BFC 可以创建一个独立的区域进行布局。如一个父盒子创建了 BFC，那么里面的子元素无论如何也逃不出父盒子的限制，它只能在父盒子里面折腾。

二、创建 BFC 的条件

• 根元素或包含根元素的元素
• 浮动元素（元素的 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，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

---

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

块格式化上下文对浮动定位（参见 float）与清除浮动（参见 clear）都很重要。浮动定位和清除浮动时只会应用于同一个 BFC 内的元素。浮动不会影响其它 BFC 中元素的布局，而清除浮动只能清除同一 BFC 中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一 BFC 的块级元素之间。

三、BFC 功能/特性

功能 1：父元素管所有的子元素

• 假设现在有一个父元素盒子和两个子元素盒子，子元素进行浮动布局。先演示没有创建BFC的样例

<!-- HTML -->
<div class="father">
  <div class="son1"></div>
  <div class="son2"></div>
</div>
<style>
.father {
	border: 1px solid red;
	min-height: 10px;
	margin: 100px auto;
}
.son1,
.son2 {
	float: left;
	width: 200px;
	height: 100px;
	margin-left: 300px;
}
.son1 {
	background-color: aqua;
}
.son2 {
	background-color: black;
}
</style>

• 上面同样的示例创建BFC之后

  随意选取一个创建 BFC 的条件之一，如overflow:auto

<!-- HTML -->
<div class="father">
  <div class="son1"></div>
  <div class="son2"></div>
</div>
<style>
.father {
	overflow:auto;	/* 加上这行代码使的父元素创建了一个BFC */
	border: 1px solid red;
	min-height: 10px;
	margin: 100px auto;
}
.son1,
.son2 {
	float: left;
	width: 200px;
	height: 100px;
	margin-left: 300px;
}
.son1 {
	background-color: aqua;
}
.son2 {
	background-color: black;
}
</style>

功能 2：兄弟盒子之间互不影响

• 两个同级之间的兄弟盒子，其中有一个浮动，那么两个兄弟盒子之间就会进行重叠。先演示未创建BFC的样例

<!-- HTML -->
<div class="box1"></div>
<div class="box2"></div>
<style>
	 .box1 {
        width: 100px;
        height: 200px;
        border: 2px solid red;
        float: left;
        margin-left: 300px;
      }
      .box2 {
        height: 100px;
        border: 3px solid black;
      }
</style>

• 上面同样的例子创建 BFC 后，如：display:flow-root

<!-- HTML -->
<div class="box1"></div>
<div class="box2"></div>
<style>
	 .box1 {
        width: 100px;
        height: 200px;
        border: 2px solid red;
        float: left;
        margin-left: 300px;
      }
      .box2 {
        height: 100px;
        border: 3px solid black;
		display: flow-root;
      }
</style>

四、与清除浮动的关系

BFC与清除浮动没有关系！

BFC 和清除浮动是两个独立存在的，如需清除浮动。只需要加上下面的代码

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

五、参考资料

块格式化上下文