Float在某些项目的CSS上无法正常工作

Question

当我使用浮动左边的物品（大约100件物品）时，它不能用于其中一个而且这个项目单独在一行上。每个项目的css代码是：

div.products.span4 {
    float: right;
    padding: 2em;
}

可以在下面的网站上看到问题的示例。 关于名为C110479的项目的negareh taban，您可以单独查看它。

如何解决这个问题？

Answer 1

.products:nth-of-type(3n+1) {
    clear:left;
}

对我来说很好。

Answer 2

问题是项目C110477比邻居高1个像素，因此下一行从最近的浮动对象的右边缘的右边开始，即C110477。

额外像素是由于图像高度为226px而不是225px。

解决此问题的一种方法是指定div.products.span4的高度并设置overflow: hidden，使得所有浮动元素具有相同的高度，而不管图像高度的任何微小变化。