BFC

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

BFC的产生

1. 根元素；
2. float属性不为none；
3. position为absolute或fixed；
4. display为inline-block, flex, 或者inline-flex；
5. overflow不为visible；

BFC特性

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

作用

1. margin 合并
2. 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

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

3. 父元素形成BFC

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

自己与自己合并

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

解决方法：只设一个margin-top或者margin-bottom，数值调整为想要的数值，如上例的60px；

相邻元素合并

1. 设置浮动

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

2.不用解决
把margin设为想要的值就行。