SOURCE

<!--  解决上下块级元素margin重叠问题  -->
<style>
  .box1 {
    width: 200px;
    height: 100px;
    background-color: red;
    margin-bottom: 10px; /* 下外边距为 10px */
  }

  .box2 {
    display: inline-block;
    width: 200px;
    height: 100px;
    background-color: green;
    margin-top: 10px;  /* 上外边距为 10px */
  }
</style>

<div class="box1"></div>
<div class="box2"></div>

<!--  解决浮动问题  -->
<!--  块级元素没有高度，因为float问题  -->
<style>
  .box3 {
    width: 200px;
    background-color: red;
    overflow: hidden;
    margin-bottom:30px
  }
 
  .box4 {
    float: left;
    background-color: green;
  }
</style>
 
<div class="box3">
  <div class="box4">Hello,world</div>
  <div class="box4">Hello,world</div>
  <div class="box4">Hello,world</div>
</div>
<!-- 实现自适应布局 -->
<style>
  .box5 {
    float: left;
    width: 300px;
    background-color: red;
    height: 400px;
  }
 
  .box6 {
    background-color: blue;
    height: 600px;
    overflow: hidden;
  }
</style>
 
<div class="box5"></div>
<div class="box6"></div>