外边距重叠/BFC-前端日常总结
什么是外边距重叠
两个相邻(父子或兄弟关系)的块级元素都设置了外边距，此时浏览器会取这两个相邻块级元素外边距最大边距（如果两个边距相等，就取其中一个）设置值。
如下图：此时浏览器上控制台styles栏中，.con2样式的margin-top
和con1样式的margin-botton虽然都设置了10px,但是在浏览器渲染出来的效果是10px,而不是20px。这就是外边距重叠的效果
如何防止外边距重叠呢？
创建新的BFC可以防止
什么是BFC呢？
英文全名：Block Formatting Context 中文理解：块级格式化上下文
满足一下条件之一，形成BFC。
- 浮动元素：float除了node以外的值。
- 定位元素：position(absolute,fixed)
- display:inline-block,table-cell,table-caption之一
- overflow：为visible除外的值(hidden,scroll)
如解决外边距重叠如下
新建一个不同的BFC
