外边距重叠/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