浅谈BFC
引入
那是一个宁静的夜晚，这个夜晚本应如此的完美，代码加英语，看会直播，睡觉，直到，我遇到了她。
她令我分外迷茫，我一时不知所措，为什么，源于何，我的心宛若坠入长河，我与她之间的关系，就如下图所说：
子级盒子加上了margin，本应该图片向下移动，但反而是父级盒子向下运动。而给父级加上了border，则一切照常
这是因为什么呢？因为我前面提到的“她”
她就是
BFC，中文名叫块级格式化上下文
BFC
突然的名词总是让人不知所措，什么是BFC？
在这之前我们来了解一下，什么是box？
box是css布局的基本单位 ，整个页面是由多个box组成的，不同的box渲染规则不同，元素的类型及display的属性值决定box的渲染规则。
言归正传，回到BFC
定义
BFC全称：Block Formatting context 译为块级格式化上下文，从叫法来看应该和块级或和块级有联系的box有关
BFC布局规则：
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算
产生条件：
BFC不会凭空产生，也不会凭空消失，它必然由一个属性产生，或由于另一个属性改变。那些元素会产生BFC？
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
那么前面代码的问题出现在哪呢？
有人会说，这不是margin塌陷吗，没错，但margin塌陷因为什么呢？怎么解决呢？
根据布局规则第二条我认为margin决定垂直方向的距离，而普遍认为margin控制两个box之间的距离，那么margin很可能受bfc影响。因此margin会以上一级bfc进行判断。
我们通过例子来证实上面的判断
初始结构为祖父，父，子三级结构，宽高都是父级的一半。
-
初始效果
Image [3].png
-
对子级添加margin-top，效果图
Image [4].png
可以看到盒子整体向下平移，原因是margin会以上一级bfc进行判断，根据前面的产生条件不断向上查找，能够产生bfc的只有根元素<html>，因此margin变成了html与子级之间的距离。
-
对父级添加overflow:hidden
Image [5].png
BFC开启，上一级的BFC是元素的父级，margin作用在子级与父级之间
-
祖父产生BFC
Image [6].png子级使用margin-top
Image [7].png
可以看到margin-top的确以BFC为BOX间的标准，作用于两个BFC之间
前面我还提到，加了border后问题得到了解决，原因在于border的border-top产生了类似border-box，padding同样有此效果。
可以认为border包裹了盒子，令margin判断其为一个快级上下文，因为下文测试其没有产生BFC。
【注】仅是margin-top受BFC影响，margin-left及right不受影响
除了margin塌陷，BFC平时还体现在哪里呢？
-
两栏布局
左盒子定宽定高左浮动，右盒子定高。效果如下
Image [8].png
此时原因在于每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
因此即使有左盒子，右盒子依然与父级接触。这也是前面说margin-left不受影响的原因
【注】border box是包含块，不是border边框
overflow令右盒子产生BFC
可以看到
原因在于BFC的区域不会与float box重叠。
关于padding及border是否会产生BFC的问题，在这里对右盒子使用没有令其产生BFC，可以认为二者只是起到了类BFC的效果，且仅有效果于margin塌陷或重叠中，不过这对日常编码影响不大。
-
清除浮动
父级定宽不定高，靠子级撑开，子级定宽定高，左浮动效果如下
Image [10].png
原因在于float脱离了文档流
overflow开启BFC
原因在于计算BFC的高度时，浮动元素也参与计算
