html - float 元素 : some end up alone in the row

Question

所以，设置了一个非常标准的漂浮物。

<div class="container clearfix">
   <div class="item">Some content</div>
</div>

CSS

.item {
  float:left
  width: 30%;
  margin: 1.5%;
  background-color: #fff;
  border: 1px solid #929292;
}

也有adsense广告混入，但它们的尺寸被.item包含

问题其中一项(本应排在第一位的项)单独位于容器右侧，其余项位于下一行，向左浮动正如他们应该的那样。

这个问题可能在这里出现过好几次，但我的搜索没有返回任何结果。我猜是错误的关键字。

附注我试过改变宽度和边距。

Answer 1

一些浏览器将您的 1.5% 舍入到 2%。这可能是问题所在吗？因为这样一来，您的总计将有 102%，导致它崩溃。

您也可以使用填充而不是边距，然后您可以设置 box-sizing: border-box;。如果你这样做，你的填充将包含在总宽度中。

根据您的实时版本，这是您的答案:

带有广告的商品与您的其他商品高度不同，这就是它们看起来很奇怪的原因。您必须清除广告后第一个元素上的 float ，或者确保所有元素的高度相同。