CSS清楚：两者都显示了很多空间

Question

我正在处理一个表格，该表格在div标签中有一些字段，并且这些字段向左浮动。

问题是，当我清除浮动后，它显示

之后的大量空间

这是示例代码

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

当我删除clear时：两者都来自#product-addons-total，块高度正常

屏幕

删除后清除

我尝试了各种解决方案，但无法修复，有人可以帮我解决这个问题吗

Answer 1

当容器有一些浮动的div时，你必须在容器div上使用 overflow：hidden; 。

所以在这种情况下你必须在 .cart

上使用 overflow：hidden;