外间距的重叠问题

在文档流的流式布局中：

1. 块级元素在竖直方向上相邻的margin会发生合并现象，取最大值显现

2. 父元素中第一个和最后一个子元素都有和父亲"重叠的边"，实际看margin超出了父元素范围

3. 由于首尾子元素与父元素贴边的原因，无法区分边归属谁，所以子元素的上下外间距会带动父元素一起动

解决父子重叠问题【要点】

1. 给父元素加边框

border: 2px solid yellow;

2：给父元素加内边距

padding: 50px 0;

3：父级设置块级格式化上下文BFC

overflow: hidden;