CSS clear:both 显示很多 space

Question

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

问题是，当我清除浮动时，它在

之后显示很多 space

这里是示例代码

<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-total 中删除 clear:both 时，块高度恢复正常

屏幕

移除清除后

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

Answer 1

当容器有一些浮动 div 时，您必须在容器 div.

上使用 overflow:hidden;

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

上使用 overflow:hidden;

CSS clear:both 显示很多 space

CSS clear:both shows lots of space

html

css

css-float