块级元素margin折叠

父级DIv和子元素div（块级）都设置margin时，两者的margin-top和margin-bottom会重合，如果子div和父级div都设置了，两者构成的盒子的margin-top取两者最大值，父元素和子元素之间没有间隔。如下图所示。

原因是：BFC执行环境中Box（上面的父级，子集div）垂直方向的距离由margin决定，同属于一个BFC的两个BOX的margin会发生重叠。

BFC（Block Formatting Context）块级格式化上下文，在可视化布局时BFC为HTML元素提供了可以按照一定规则进行布局的环境。一个环境中的元素不会影响到其他环境中的布局。

BFC产生：

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；

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　

解决方法： 
1、修改父元素的高度，增加padding-top样式模拟（padding-top：1px；常用） 
2、为父元素添加overflow：hidden；样式即可（完美） 
3、为父元素或者子元素声明浮动（float：left；可用） 
4、为父元素添加border（border:1px solid transparent可用） 
5、为父元素或者子元素声明绝对定位

注：本文内容是下面链接中截取的，详情可参考下面的内容。

CSS布局基础——BFC：http://www.cnblogs.com/yzg1/archive/2016/07/14/5670684.html

谈谈BFC与ie特有属性hasLayout：https://segmentfault.com/a/1190000004621361

参考：http://www.jb51.net/css/75789.html