当容器使用 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 属性——我只是想了解为什么会发生这种情况。)
最佳答案
看来这确实是一个 Chrome 错误:Issue 178134: Floated elements render incorrectly when parent element has a clear property + a top margin .根据该报告,Chrome 27 及更高版本不受影响。
关于css - 当包含元素具有 clear 属性时, float 元素继承上边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15350154/