1.问题
在页面父子级结构中:若父级结构与相邻子级结构之间没有内容,且父级不存在border的情况下。父级与子级元素的margin会发生合并,也就是所谓的margin击穿问题。
<style>
*{ margin: 0; padding: 0; }
.father{
margin-top: 50px;
}
.son{
width: 100px;
height: 100px;
background-color: #f60;
margin-top: 20px;
}
</style>
<div class="father">
<div class="son">sonDiv</div>
</div>
页面效果如下:
2.BFC
在父级中添加【overflow:auto】是一个比较常用的方法。
.father{
margin-top: 50px;
/* overflow: auto; */
}
结果:
3.特殊情况
根据BFC思想,其实只要在父级与子级之间插入一个内容就能搞定这个问题。所以伪元素::before看起来是最保险的,毕竟它一定位于父元素内部的最起始位置。因此给父级元素添加::before伪元素,设置为block块级。这样父级与子级之间就不再直接相邻,而是有有一个块级元素间隔。然而,事实是不生效。
<style>
*{ margin: 0; padding: 0; }
.father{
margin-top: 50px;
}
/* 使用伪元素间隔开父子级,不再直接接触 */
.father::before{
content: "";
display: block;
}
.son{
width: 100px; height: 100px;
background-color: #f60;
margin-top: 20px;
}
</style>
<div class="father">
<div class="son">sonDiv</div>
</div>
修改为table,在尝试一次
.father::before{
content: "";
display: table;
}
可以了。
4.总结
在处理BFC问题的时候,大多数情况下【display:block】和【display:table】功能类似。只不过当面对上述情况的时候
如果伪元素content的内容为空
那么display:block处理BFC后仍旧存在margin击穿问题。而display:table则拥有良好表现。
————————————————