关于BFC的相关，这里做一个比较详细的总结
1、BFC的基本概念
BFC：直白点说就是满足一定规则的一个块级布局区域，这就是核心了，我们可以利用BFC的规则来很容易的达到某些布局需求，其实我们在布局中很可能已经默默用过BFC了，但是对BFC没有一个比较清晰的认知，下面我就详细的介绍一下
Box
Box 是 CSS 布局的对象和基本单位， 一个布局页面就是各种各样的Box组成的，不同类型的Box会有不同的渲染规则，下面是常用的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）。
另外，CSS3中还增加了Grid（GFC）和Flex（FFC）
BFC详细定义
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC布局规则：
- 内部的Box会在垂直方向依次放置。
- Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
- 计算BFC的高度时，浮动元素也参与计算
BFC的生成方法
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
2、BFC的应用
-
内部清除浮动，浮动会导致父级元素整体结构塌陷，我们通过构造BFC，可以达到清除浮动的功能，具体如下
这里需要给父元素加上overflow: auto属性即可，构造成BFC后，浮动元素也会计算宽度
塌陷的父级元素：
塌陷的父级元素.png
构造BFC后的父级元素：
构造BFC后的结构.png -
解决margin重叠的问题
这里将两个子元素放置在两个不同的BFC中，才不会发生重叠，在同一个BFC下，会发生margin重叠，这个是BFC的布局规则
margin重叠的情况：
margin重叠的情况.png
构造BFC后的情况：
构造BFC后的margin情况.png -
解决自适应左右布局的问题
这里是采用的左右布局的一种方法，即左边浮动，右边构造BFC的方法，因为浮动元素会脱离文档流，构造成BFC后，会计算浮动元素的宽度，另外一边自然就能自适应了
左浮动，右边未构造BFC，会导致右侧在文档流中从最左边开始，我们说了float会导致元素脱离文档流，如下图：
左浮动右自适应布局未构造BFC.png
左浮动，右边构造BFC，这是应用了 BFC的区域不会与float box重叠的特性：
左浮动右边构造BFC效果.png
