如何解决margin‘塌陷‘？如何解决margin‘塌陷‘？在盒子模型开发我们可能会遇到：在互相嵌套的块级元素，子

如何解决margin‘塌陷‘？

在盒子模型开发我们可能会遇到：在互相嵌套的块级元素，子元素的 margin-top 会作用在父元素上的场景，结果导致父元素一起向下移动的问题，我们怎么应该用办法来解决它呢？

我的解决方法是：

给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）

给父元素设置（overflow：hidden ）

转换成行内块元素

设置浮动

 <style>
    /* 
            外边距塌陷现象：互相嵌套的块级元素，给子元素设置上外边距，会导致父元素也一起跟着掉下来
            */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      /* background-color: #000; */
    }

    .box {
      width: 500px;
      height: 500px;
      background-color: #6cf;
      /* 
                1. 设置边框
                border-top: 1px solid transparent;
                2. padding-top: 1px;
                3. oh overflow: hidden;(目前先知道可以解决外边距塌陷问题即可) 【推荐】
                4. 父元素设置display: inline-block;
            */

      /* 1. 设置边框 */
      /* border-top: 1px solid transparent; */

      /* 2. 设置内边距 */
      /* padding-top: 1px; */

      /* 3. oh 溢出隐藏*/
      /* overflow: hidden; */

      /* 4. 把父元素设置为行内块元素 */
      /* display: inline-block; */

      /* 设置浮动 */
      float: left;
    }

    .son {
      width: 200px;
      height: 200px;
      background-color: pink;
      /* 儿子想要离家出走 带着爸爸 一起走*/
      /* margin-top: 100px; */
      margin-top: 100px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="son"></div>
  </div>
</body>

总结：以上方法仅供参阅，如有遗漏，可请诸君补充！