Html Firefox身体边缘缺陷？

我有一个简单的例子：

<header>
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li class="clear"></li>
    </ul>
</header>
<section>section</section>

所以我希望“header”直接进入左上角，然后是100px的边距，然后是“section”。在所有主要的浏览器中都能正常工作，但在Firefox（版本16）中，由于某些原因，“header”会获得额外的页边空白

这是虫子吗

下面是一个JSFIDLE示例：

顺便说一句

---

如果我使用clearfix而不是“clear”类，那么它工作得很好。

您可以使用

{padding bottom:100px；}

而不是margin来实现这一点

不要用非语义和不必要的空

-s污染您的代码，只需将

溢出：隐藏
添加到您的

HTML

毫无疑问，这是一个bug。利润绝对不应该存在


根据Firebug，我能看到的唯一计算出的非零边距是
头
元素上与CSS中相同的
边距底部：100px
。其他一切都是零

即使Firebug的DOM检查器也难以识别它；它从不突出显示该区域，但当您检查
html
本身时（它作为其内容区域的一部分突出显示）显然是个例外


我发现了大量的bug报告，这些报告是作为的副本关闭的，还有更多的测试用例。另外，它看起来至少从Firefox2开始就存在了。
谢谢你的回答。我知道如何避免这个问题。无论何时这是一个bug，或者只是我不理解的行为，我都感兴趣。我不是在寻找解决方法，无论何时这是一个bug，或者只是我不理解的行为，我都感兴趣。非常感谢您的回答。这正是我想知道的。
BODY, HTML{
    margin: 0;
}
header{
    margin-bottom: 100px; /* section goes down */
}
UL{
    list-style-type: none;
}
UL LI{
    float: left;
    background: green;
}
.clear{
    clear: both;
    float: none;
}
section{
    background: red;
}

<header>
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ul>
</header>
<section>section</section>

ul {
    list-style-type: none;
    overflow: hidden;
}