请描述 BFC(Block Formatting Context) 及其如何工作
上海分院：顾配如
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
1.背景介绍
box,Formatting Context基本概念
先了解下box和Formatting Context，
Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的
Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。 让我们看看有哪些盒子：
block-level box
display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；
inline-level box
display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；
Formatting context
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的
Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。 CSS2.1
中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC。
常见定位方案
在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案:
一 普通流 (normal flow)
在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中， 行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行， 除非另外指定，否则所有元素默认都是普通流定位，也可以说， 普通流中元素的位置由该元素在 HTML 文档中的位置决定。
二 浮动 (float)
在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移
三 绝对定位 (absolute)
在绝对定位布局中，元素会整体脱离普通流， 因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。
2.知识剖析
BFC 概念
BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。 具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，它是一个独立的渲染区域，只有block-level box参与，规定了内部block-level-box如何布局，并且 BFC 具有普通容器所没有的一些特性。 你可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素不会影响到外部。具体看后面的例子实际理解
BFC布局规则
.box1 { box-sizing: content-box; } /* 默认值 */
.box2 { box-sizing: padding-box; } /* FireFox曾经支持 */（padding-box在background-clip, background-origin等有用到）
.box3 { box-sizing: border-box; } /* 全线支持 */（就是我们用的怪异盒模型，）
.box4 { box-sizing: margin-box; } /* 从未支持过 */(没什么价值，没什么使用需求)
• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
•每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。就是元素左margin和包含块左border接触，即使存在浮动也是如此。左浮动就是靠左，右浮动就是靠右，
• BFC的区域不会与float box重叠。应用于两列布局
• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。上下margin不影响，浮动不覆盖，后面看demo
•计算BFC的高度时，浮动元素也参与计算。如父元素高度塌陷，清除浮动。父元素高度由内部撑开，计算bfc高度，内部浮动的子元素也参加。
如何触发BFC
只要元素满足下面任一条件即可触发 BFC 特性：
1.body 根元素
2.浮动元素：float 除 none 以外的值
3.绝对定位元素：position (absolute、fixed)
4.display 为 inline-block、table-cells、flex
5.overflow 除了 visible 以外的值 (hidden、auto、scroll)
具体看demo理解
3.常见问题
1. 同一个 BFC 下上下外边距会发生重叠
2. 元素浮动后父元素高度塌陷
3. 元素被浮动元素覆盖
4.解决方案
1. 如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。
2. 父元素触发BFC，清除浮动，高度由内容撑开自适应，不存在结构和语义化问题，代码量极少 ，当然内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素，可以用别的清除浮动方法如伪元素
3. 第二个元素触发BFC，可用于左列定宽，右列自适应的俩列布局
5.编码实战
6.扩展思考
为什么用overflow触发而不用其他的？
因为其他如float,positon等等会影响布局,达不到我们想要的效果
7.参考文献
8.更多讨论
鸣谢
感谢观看
BY——顾配如