一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第21天，点击查看活动详情。
BFC是Block Formatting Context这⼏个英⽂拆解。
Box是指CSS布局的基本单位，Box 是 CSS 布局的对象和基本单位， 直观点来说，就是⼀个⻚⾯是由很多个 Box 组 成的，实际就是上个问题说的盒模型
Formatting context：块级上下⽂格式化，它是⻚⾯中的⼀块渲染区域，并且有⼀套渲染规则，它决定了其⼦元素将如何定位，以及和其他元素的关系和相互作⽤
简⽽⾔之，它的特点就是⼀块独⽴的区域，让处于BFC内部的元素与外部的元素互相隔离。
BFC的触发条件如下：
- 根元素，即HTML元素
- position: fixed/absolute
- float 不为none
- overflow不为visible
- display的值为inline-block、table-cell、table-caption
BFC的主要作用有以下几点：
防止margin发生重叠
两个或多个块级盒子的垂直相邻边界会重合，使用BFC是页面上独立容器的特性可以消除margin重叠。
下面是margin值的计算方法：
- 全部都为正值，取最大者；
- 不全是正值，最大正值+最小负值；
- 没有正值，零+最小负值。
详细可以看这个演示
两栏布局，防止文字环绕
防止元素塌陷
div，段落，或文本等HTML元素会逐渐适应子元素的内容。如果这些元素的子元素设置浮动，比如向右或向左漂浮，那么这些元素可能会崩溃，出现高度塌陷问题。
使用BFC是页面上独立容器的特性同样可以解决元素塌陷问题。
详细可以看下面的演示
BFC布局规则如下：
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定，于同一个BFC的两个相邻Box的margin会发生重叠。
- 每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算。
注意：123条非BFC的块级元素也具有，456仅BFC具有。
