外边距塌陷问题导致子盒子绝对定位top属性出问题

body {
    position: relative;
}
.father {
    margin: 100px auto;
    width: 800px;
    height: 300px;
    background: #000;
}
.son {
    position: absolute;
    top: 100px;
    width: 500px;
    height: 100px;
    background: pink;
}

<div class="father">
    <div class="son"></div>
</div>

运行结果如下

本身想利用子绝父相将子盒子定位在离body的top:100px的位置，但是实际上离body最上面有200px的距离

问题原因：查看控制台后发现给father设置的margin-top:100px导致body高度塌陷了

如图：

 解决方法：

给body加一个border-top即可解决高度塌陷问题

border-top: 1px solid red;

问题解决：

 除此之外，还有别的解决外边距塌陷的办法。如：

1. 可以为父元素定义上内边距

2. 可以为父元素添加overflow:hidden。

注意：此处不能给body加overflow:hidden，没有效果

总结：

• 对于两个嵌套关系的块元素，如果父元素没有上内边距及边框

• 父元素的上外边距会与子元素的上外边距发生合并

解决办法：

1. 可以为父元素定义上边框。

2. 可以为父元素定义上内边距

3. 可以为父元素添加overflow:hidden。

4. 为父元素或者子元素声明浮动 

5. 为父元素或者子元素声明绝对定位

PS：声明浮动、绝对定位可以使元素脱标，脱标元素不会造成外边距塌陷