今日在移动端布局的时候, 使用正常的流式布局, 但是子元素设置了 margin-top, 会导致其父级整个移动.

更新

[2020-3-12]

  • Initial release

问题概述

1
2
3
<div class="parent">
  <div class="child"></div>
</div>
1
2
3
4
5
6
7
8
9
10
.parent {
  width: 200px;
  height: 200px;
  background-color: #1890ff;
  .child {
    height: 50px;
    margin-top: 50px;
    background-color: #daa520;
  }
}

如上所示代码, 我想给 child 元素设置一个顶部的距离其父级元素 parent 的间距, 并且 parent 元素未设置高度, 理想的结果是这样的:

但是实际的情况是:

可以看到, child, 也就是黄色区域连同其父元素 parent 整个向下移动了 50px, 这就是 margin 塌陷.

解决方案

给父元素 parent 设置一个 overflow: auto 即可.