元素的BFC理解

何为BFC

BFC简单理解就是，一块元素区域被赋予了某些样式特性，就会形成一个独立的区域，在此区域内的元素进行margin，padding等改变内部元素样式的操作，不会影响BFC区域外的其他元素。
我们来看一个例子


有两个盒子，大盒子套着小盒子，给小盒子加个上外边距50px，我们期望的是小盒子以大盒子的边缘为基准来下移50px距离，但是事实和我们想的不一样，内外盒子出现了margin重叠的现象，内盒子的margin-top就不是以外盒子为参照物，而是以body为参考物，然后内盒子在外盒子内，因此就带着外盒子也有50px的margin-top。

实现BFC的方式

那么问题来了，我们如何让小盒子以大盒子为参照物，达到我们预期了，我们可以用BFC来解决这个问题，也就是让大盒子形成一个BFC区域，小盒子的行为就会被限定在大盒子内，就没办法以body为参照物了，只能以大盒子为参考。
大盒子形成BFC的效果，达到了我们的预期：

形成BFC区域的手段如下：

1. border
   
2. flow-root
   
3. overflow: hidden和auto
   
   

其他例子

再来看下一个例子：

我们期望上下盒子中间的边距有80px，实际只有40px，外边距重叠了。

再来做个小实验，我们来看看两个盒子的实际大小是多少，目前上下两盒子的实际大小都是100px，现在给上盒子增加10px内边距：

效果如下

我们发现上盒子的红色背景区域变大了，也就是说上盒子变成120px了。

我们再试着给上盒子增加1px边框：

效果如下，我们发现上下盒子间距仍然是40px，本以为加border可以向上面的例子一样解决问题，但是事实却不符合期望：

为什么？
重叠的40px外边距明显不符合我们预期（上盒子的margin-bottom以下盒子为参照物，下盒子的margin-top以上盒子为参照物），所以我们该怎么创造我们想要的事实局面？
我们逐一方法尝试：
1.display: flow-root;这种方式只是给自己的元素创造BFC区域，但是两盒子的外边距不在BFC区域内，因此两盒子的参照物都是对方。

结果仍然不变：

2. overflow: auto;或者overflow: hidden;这种方式只是给自己的元素创造BFC区域，但是两盒子的外边距不在BFC区域内，因此两盒子的参照物都是对方。

结果依然不变：

3. 给下盒子套个盒子，并让它形成BFC区域，这样下盒子的外边距40px就是以套盒子的边缘为参照物，而上盒子以套盒子的边缘为参照物。


实际结果如预期：

因此第3种方法解决了我们例子的问题！

补充知识

一、
在id=app的最外层盒子下，清除了内外边距，浏览器展示的效果，外层盒子和屏幕依然会有边距。

这代表了body元素依然有边距，我们点击body元素，可以看到外层盒子有个8px外边距，或者说body有个8px的内边距。

二、
单个元素的结构，不外乎由以下几种部门组成，无有例外：1.盒子自身以外的部门：margin 2.盒子自身的组成部门：border, padding , width和height