CSS clear:both shows lots of space

Question

I'm working on a form which has some fields within div tags and those are floated to left.

The problem is when i clear the float it shows lots of space after

here is sample code

<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>

Styles are here

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;
}

When i remove clear:both from #product-addons-total the block height comes normal

Screen

After remove clear

I tried various solutions but couldn't able to fix, can someone help me to fix this please

Answer 1

When a container has some floated div, you have to use overflow:hidden; on the container div.

So in this case you have to use overflow:hidden; on .cart