margin塌陷
1、这个问题是一个经典的浏览器内核问题。具体表现是当两个元素嵌套到一起时,外层盒模型的margin-top取两个元素中margin-top较大的值。
2、在文档流中,父元素的高度默认是被子元素撑开的,子元素有多高,父元素就有多高。当子元素设置浮动之后,子元素会完全脱离文档流,此时将会导致子元素无法撑开父元素的高度,导致父元素高度塌陷
<div>
<div class="wrapper">
<div class="content"></div>
</div>
</div>
.wrapper{
margin-left:50px;
margin-top: 50px;
width:100px;
height:100px;
background-color: red;
}
.content{
margin-left:50px;
margin-top:80px;
width:50px;
height:50px;
background-color: black;
}
在正常的情况下内层元素是相对于外层元素进行移动,但是这时内层元素却相对于整个文档进行移动,好像外层元素没有“棚顶”一样,此时margin-top为80px,因此叫margin塌陷问题。
由于父元素高度塌陷,子元素想要通过margin-top向下移动,可是失败了,如果margin-top超过一定限度就会带着父级一起向下移动。
margin塌陷问题解决方法:
1、给外层元素一个“棚顶”:border。
这种方法虽然能够解决问题,但是在日常开发中我们不使用它,因为他在外观上对元素进行了改变
2、在父级里加bfc语法,触发bfc语法,改变渲染规则。
bfc: block format context 块级格式化上下文。每一个元素都是一个盒子,每一个盒子都符合一定的渲染规则。我们可以通过触发bfc方式,让特定盒子里的渲染规则发生变化。
触发bfc:
position:absolute;
display:inline-block;
float:left/right;
overflow:hidden;
如图未加bfc,黑色块并不会相对于红色块顶端向下移动。
如图在父级加入 position:absolute; display:inline-block; float:left/right;
margin合并
<div class="demo1"></div>
<div class="demo2"></div>
.demo1{
height:100px;
background-color: pink;
margin-bottom:10px;
}
.demo2{
height:100px;
background-color: brown;
margin-top:10px;
}
这种情况下demo1与demo2的上下margin会合并。
可在外面包裹一层父级,添加bfc语法,可避免这种情况。但在开发过程中,不能随意修改增添html结构,常用数学方法弥补合并问题,直接相加。