父子元素margin不重叠的解决办法：

* 外层元素添加padding

外层元素 overflow:hidden;

外层元素透明边框 border:1px solid transparent;

内层元素绝对定位 postion:absolute:

内层元素 加float:left;或display:inline-block;

BFC触发的条件:

1.设置除 float:none 以外的属性值（如：left | right）就会触发BFC

2.设置除 overflow: visible 以外的属性值（如： hidden | auto | scroll）就会触发BFC

3.设置 display属性值为: inline-block | flex | inline-flex | table-cell | table-caption 就会触发BFＣ

4.设置 position 属性值为：absolute | fixed 就会触发BFC

5.使用 fieldset 元素（可以给表单元素设置环绕边框的html元素）也会触发BFC