BFC

BFC 全称 Block Formatting Context
每个渲染区域用formatting context表示，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用

BFC的产生

根元素；
float属性不为none；
position为absolute或fixed；
display为inline-block, flex, 或者inline-flex；
overflow不为visible；

BFC特性

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。

作用

margin 合并
contain float

margin合并

按照BFC的定义，只有同属于一个BFC时，两个元素才有可能发生垂直Margin的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡(例如边框，非空内容，padding等)就会发生margin重叠。
因此要解决margin重叠问题，只要让它们不在同一个BFC就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为BFC就可以了。这样子元素的margin就不会和父- 元素的margin发生重叠
BFC不会重叠浮动元素
BFC可以包含浮动

从上面一段话可以总结出3种防止margin合并的方法：加边框、加padding、BFC。
讲margin合并前先讲一下margin合并的情况，margin合并也只有3种情况：相邻元素合并、父子合并（包括祖先元素）、自己和自己合并。而以上3种防止margin合并的方法主要是针对父子margin合并的。

父子元素合并

1. 加边框

屏幕快照 2018-12-06 上午10.22.03.png

屏幕快照 2018-12-06 上午10.22.18.png

解释：header和h1是父子元素，h1有浏览器默认的外边距margin，但h1的外边距与其父元素header的外边距合并了，所以h1的外边距溢出到header的外面去了（header的外边距在header区域外面），原本h1的外边距应该包含在header里面的，由于发生了父子元素外边距合并所以header的区域（粉色部分）变小了；当给header加上边框后，父子元素的外边距不合并了，所以h1的外边距被包含在header里面了，header的区域变大了。

2. 加padding