用浮動代替定位解決動態變化的div內容，一個div浮在兩個div上面

先看效果圖：

內容少的時候：

內容多的時候：

這是設計稿上的需求，有三個div，本來我用的是position定位，然而這3個div的內容是動態變化的，有時多，有時少，不能定死高度。所以用position定位就沒辦法滿足需求了。只能用浮動了。

HTML代碼如下：

 <div class="StepContent"> </div>
 <div  class='StepsOne'></div>
 <div class="clear"></div>//清除浮動用的
 <div id="tempContent"></div>

CSS代碼如下：

.StepContent{
  padding: 0 0 0.5rem;
        border-radius: 8px;
        background-color: #ffffff;
        width: 97%;
        margin: 0 auto;
        color: #969696;
        font-weight: bold;
}
.StepsOne{
      padding: 0 0 0.2rem;
      border-radius: 0.08rem;
      background-color: #a0a0a0;
      width: 90%;
      color: #ffffff;
      font-weight: bold;
      //浮動此div
      float: left;
      margin-top: -0.3rem;//margin用負的
      margin-left: 5%;
      }
.clear{
      clear: both;//清除浮動用的
    }
#tempContent{
      margin-top: -0.3rem;//margin用負的
    }