当两个盒子在垂直方向上设置margin值时,会出现一个有趣的塌陷现象。
.box1{
width: 200px;
height: 200px;
margin-bottom: 50px;
background: yellowgreen;
}
.box2{
width: 200px;
height: 200px;
margin-top: 30px;
background: gray;
}
例如这个代码,box1和box2之间设置了两个margin一个为50px一个为30px,那两个盒子之间的距离是100px吗?
不是。
两盒子之间的距离仅是50px,两盒子之间的margin出现了重叠部分,垂直之间塌陷的原则是以两盒子最大的外边距为准。
最重要的是:margin塌陷问题和合并问题都只对垂直方向有效
塌陷问题解决:
bfc–block format context
块级格式化上下文
每一个元素都是一个盒子,每一个盒子都符合一定的渲染规则。我们可以通过触发bfc方式,让特定盒子里的渲染规则发生变化。我们要给外层元素加一个特定属性来触发bfc来解决margin塌陷问题。触发bfc的方式有以下四种,我们可以根据实际的需求采用不同的方法。
1.overflow:hidden;
2.display:inline-block;
3.position:absolute;
4.float:left;