你好！BFC

[MLuminary]

BFC 这个名字听过很多次了，文章中总是说触发 BFC 然后怎样怎样，开始的时候觉得 BFC 很神秘，应该很难，当时只为解决眼前问题的我，就没有选择去了解一下 BFC，只是知道有 BFC 的存在，但并不认识他，今天终于鼓起勇气想他打个招呼，认识认识这位看似神秘的朋友.

文档流

我们常说的文档流分为三种，普通流，浮动流和定位流。在这里简单的介绍一下。

在「普通流」中，元素按照在 HTML 中的先后位置至上而下布局，块级元素从上到下依次排列，框之间的垂直距离由框的垂直 margin 计算得到。行内元素在一行中水平布置，直到占满一行则换行

「浮动流」就是元素被设置了浮动属性，一开始还是按照普通流布局，但是会根据浮动的方向移动。

「定位流」就是设置了定位属性，元素完全脱离普通流。

BFC 定义

BFC(Block Formating Context),直译过来就是「块级格式化上下文」(在 CSS3 中，BFC 叫做 Flow Root)。FC 就是其实就是普通流的意思，是一块渲染区域，有他的渲染规则。那 B 就是 block 就是块级元素。简单的理解来说，有一块独立的渲染区域，只有 block 元素，这些 block 元素按照此渲染区域的规则布局，并且不受这个区域外部的其它元素影响。

BFC 的触发

• 根元素
• 浮动元素
• 绝对定位和固定定位
• display 为 inline-block||table-cell||table-caption||flex||inline-flex
• overflow 不是 visible

满足以上任意一个条件都可以触发 BFC，这里注意一下，触发 BFC 不是元素本身变成了 BFC，而是这个元素带有了 BFC 的规则。

BFC 的规则

为什么要触发 BFC，那 BFC 到底有什么规则，有什么好处呢？

• Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠

• BFC 的区域不会与 float box 重叠。

• 计算 BFC 的高度时，浮动元素也参与计算

作用

其实 BFC 完全贯彻的一点就是，BFC 是一个独立的不受外部影响的一个渲染区域，他也不会去影响别的元素。，记住并理解这句话也就是理解了 BFC ，因为 BFC 的作用都是根据这一规则产生的

margin 重叠

.box {
  background-color: red;
  margin: 100px;
  width: 100px;
  height: 100px;
}

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

我们知道两个 box1 和 box2 的中间间距会发生 margin 重叠并只有 100px,那是因为他们同在 html 下的一个大的 BFC 中的一个渲染区域中，我们只要让他们两个的 BFC 区域不同，他们两个就不会发生 margin 重叠.

在 box2 添加 div 包裹层,然后在此包裹层中添加任意规则属性，就会发现 margin 重叠问题已经解决.因为此时 box2 身处的 BFC 和 box1 就不相同了。

清除浮动

剩下两个规则都与浮动有关，其实我听说 BFC 这个名词也是因为清除浮动，因为 BFC 不能影响外部的布局，所以计算高度时，浮动也参加运算，因此就解决了高度塌陷这个问题。

总结

前端之路还在继续，认识了 BFC 以后也会去多多了解磨合。总之现在严格记住的一点就是他是一个独立的不影响外部也不受外部影响的区域，那其他的特性都是建立在此基础上的。