什么是BFC？
BFC（Blcok Formatting Context) 块级格式化上下文，仅仅概念上理解是不够的，如果想要深入的理解BFC，我们还需要弄清楚几个概念！
- Box
Box（盒子）是CSS布局的基本单位，简单点来说一个页面，是由很多Box组成的。元素的类型和display属性，决定了这个Box的类型，不同类型的Box，会参与不同的Formatting Context(一个决定如何渲染文档的容器)。因此Box内的元素，会以不同的方式渲染，那么Box分为几种类型呢？
- block-level box:
display属性为 blcok、list-item、table的元素会生成 block-level box，并参与blcok formatting context .inline . - inline-level box:
display属性为inline、inline-blcok、inline-table的元素会生成 inline-level box,并参与 inline formatting context . - run-in box: css3中才有，这里就先不说了
- Formatting Context
Formatting Context 是W3C CSS2.1规范中的一个概念，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素应该如何定位，已经和其他元素的关系和相互作用。
最常见的Formatting Context 有 Blcok Formatting Context (简称BFC)和 Inline formatting context （简称IFC）
CSS2.1中只有BFC和IFC ，CSS3中还增加了GFC和FFC。
理解了上边两个概念之后，我们来详细说下BFC
- BFC 块级格式化上下文，它是一个独立的渲染区域，只有box- level box参与，它规定了内部box-level box 如何布局，并且与这个区域外部毫不相干
BFC的布局规则：
- 内部的Box会在垂直方向上，一个接一个的放置
- Box垂直方向上的距离，有margin决定，同属于一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边，与包含块的border box的左边相接触(对于从左往右的格式化，否则相反).即使存在浮动也是如此
- BFC的区域，不会与float box重叠
- BFC就是页面上的一个隔离的独立的容器，容器里的子元素不会影响到外部的元素，反之也如此。
- 计算BFC的高度时，浮动元素也参与计算
哪些元素会触发BFC？
- 根元素 <html>
- float属性不为none
- overflow不为visible
- position为absolute或fixed
- display为inline-block、table-cell、table-caption、flex、inline-flex
那么BFC具体有什么作用呢？
-
自适应两栏布局
代码如下：
image.png
页面：
image.png
根据BFC布局规则第三条：
- 每个元素的margin box的左边，与包含块的border box的左边相接触(对于从左往右的格式化，否则相反).即使存在浮动也是如此。
因此，虽然存在浮动元素.aside,但.main的左边，依然会与包含块的左边相接触
根据BFC布局规则第四条：
- BFC的区域，不会与float box重叠
我们可以通过触发.main生成BFC，来实现自适应两栏布局
image.png
当触发.main生成BFC后，这个新的BFC不会与浮动的.aside重叠，因此会根据包含快的宽度和.aside的宽度自动变窄,
效果如下：
image.png
-
清除内部浮动
代码：
image.png
页面：
image.png
根据BFC布局规则第六条：
- 计算BFC的高度时，浮动元素也参与计算
为达到清楚内部浮动，我们可以触发.par生成BFC，那么.par在计算高度时，其内部的.child浮动元素也会参与计算
代码如下：
image.png
效果如下：
image.png
-
防止垂直margin 重叠
代码如下：
image.png
效果如下：
image.png
可以看出，两个p之间的距离为100px，发生了margin重叠。
根据BFC布局规则第二条：
- Box垂直方向上的距离，有margin决定，同属于一个BFC的两个相邻Box的margin会发生重叠。
我们可以在其中一个p外边包裹一层容器，并触发该容器生成BFC，那么两个P就不属于同一个BFC，就不会发生margin重叠了
代码如下：
image.png
效果：
image.png
总结：
其实以上几个例子，都提现了BFC布局规则第五条：
- BFC就是页面上的一个隔离的独立的容器，容器里的子元素不会影响到外部的元素，反之也如此。
