CSS清除：兩者都顯示了很多空間

我正在處理div標籤內有一些字段的表單，這些表單都浮動到左側。CSS清除：兩者都顯示了很多空間

問題是，當我經過

在這裏清除它顯示了大量的空間浮動是示例代碼

<form class="cart" method="post" enctype="multipart/form-data"> 
    <div class=" product-addon"> 
     <h3 class="addon-name">印字: 名稱及日期 * </h3> 
     <div class="addon-description"> 
     <p>例子: Kelvin 17.12.2016</p> 
     </div> 
     <p class="form-row form-row-wide"> 
     <input class="input-text addon addon-custom" data-price="" name="" value="" type="text"> 
     </p> 
     <div class="clear"></div> 
    </div> 
    <div class=" product-addon"> 
     <h3 class="addon-name">選擇款式 </h3> 
     <p class="form-row form-row-wide "> 
     <select class="addon addon-select" name=""> 
      <option value="">-------- 選擇 --------</option> 
     </select> 
     </p> 
     <div class="clear"></div> 
    </div> 
    <div id="product-addons-total" data-type="simple" data-price="188"></div> 
</form>

風格在這裏

div.product-addon { 
    float: left; 
    margin: 1em 0; 
    max-height: 67px; 
    min-height: 67px; 
} 
.single.single-product form .product-addon:nth-child(n+2) { 
    float: left; 
    width: 50%; 
} 

#product-addons-total { 
    clear: both; 
    display: block; 
}

當我刪除明確的：無論是從＃product-addons - 塊高正常合計

屏幕