css - 当包含元素具有 clear 属性时， float 元素继承上边距

Question

当容器使用 clear: both;(或左/右)时，我偶然发现了容器内 float 元素的错误。在 Chrome(不是 Safari)中，第一个 float 元素的位置是正确的，但所有后续元素似乎都继承了父元素的上边距，将它们移出一行。

这是有问题的代码:http://jsfiddle.net/peterjmag/3zJey/1/

尝试切换链接以查看差异。此外，在 #product-listing 上尝试 margin-top 的各种值。

对于那些使用其他浏览器的人，以下是 fiddle 对我来说的样子(在 Chrome 25.0.1364.160 for Mac 中):

为什么 clear: both; 在 Chrome 中导致此行为？ 根据 the CSS 2.1 spec , clear 属性应该只影响文档中较早出现的 float 元素，而不是目标元素中的 float 元素。

(当然，我知道还有其他更优化的方法来清除文档中的先前元素，这些方法不需要容器 div 上的 clear 属性——我只是想了解为什么会发生这种情况。)

Answer 1

看来这确实是一个 Chrome 错误:Issue 178134: Floated elements render incorrectly when parent element has a clear property + a top margin .根据该报告，Chrome 27 及更高版本不受影响。