<div id="relative">
  <div class="first"> first</div>  
  <div class="second">second</div>  
</div>
<div id="float-to-relative">
</div>

.first { width: 200px; height: 100px;
         border: 1px solid red;  
         position: relative; top: 20px; left: 20px;
       }
.second{ width: 200px; height: 100px;
         border: 1px solid blue;
       }
#relative { float: left; width:200px;  
            border: 1px dotted black;
          }
#float-to-relative {
  float: left; width: 100px; height: 200px;
  border: 2px solid green;
}

.first {margin: 20px}

生成的图片效果： 为何#float-to-relative不左移40px?
参考：https://jsfiddle.net/elitelau/b1ho78y4/
--
FROM 218.108.104.*