上下排列情况

html部分 

  <div class="container">
    <div class="box box-top"></div>
    <div class="box box-bottom"></div>
  </div>

css部分 

    .container {
      border: 1px solid #ddd;
      padding: 10px;
    }
    .box {
      width: 100px;
      height: 100px;
    }
    .box-top {
      border: 1px solid orange;
    }
    .box-bottom {
      border: 1px solid green;
    }

 当给.box-top加上margin-top=-10px时

当给.box-top加上margin-bottom=-10px时 

左右排列情况 

html部分 

  <div class="container clearfix">
    <div class="box box-left"></div>
    <div class="box box-right"></div>
  </div>

css部分

    .clearfix::after {
      content: '';
      display: table;
      clear: both;
    }
    .container {
      border: 1px solid #ddd;
      padding: 10px;
    }
    .box {
      width: 100px;
      height: 100px;
    }
    .box-left {
      border: 1px solid orange;
      margin-bottom: -10px;
    }
    .box-right {
      border: 1px solid green;
    }
    .box-left,
    .box-right {
      float: left;
    }

当给.box-left加上margin-left=-10px时

当给.box-left加上margin-right=-10px时 

结论