外边距重叠/BFC-前端日常总结

什么是外边距重叠

两个相邻(父子或兄弟关系)的块级元素都设置了外边距，此时浏览器会取这两个相邻块级元素外边距最大边距（如果两个边距相等，就取其中一个）设置值。

如下图：此时浏览器上控制台styles栏中，.con2样式的margin-top
和con1样式的margin-botton虽然都设置了10px,但是在浏览器渲染出来的效果是10px,而不是20px。这就是外边距重叠的效果

如何防止外边距重叠呢？

创建新的BFC可以防止

什么是BFC呢？

英文全名：Block Formatting Context 中文理解：块级格式化上下文

满足一下条件之一，形成BFC。

1. 浮动元素：float除了node以外的值。
2. 定位元素：position(absolute,fixed)
3. display:inline-block,table-cell,table-caption之一
4. overflow：为visible除外的值(hidden,scroll)

如解决外边距重叠如下

新建一个不同的BFC