奇怪的CSS3保证金问题

Question

我目前正在浏览团队树屋网站上的教程视频，并且存在这个奇怪的问题，我无法弄清楚。

我上传的炼功点这里：http://www.oneniceday.com/about.html

基本上，我想10％的上边距添加到下面的水平导航链接栏的整个部分。

因此，在适当的ID，我加了10％的保证金顶端：

#wrapper 
{ 
max-width: 940px; 
margin:10% auto; 
padding:0 0%; 
background-color:black; 
} 

但是，对于一些奇怪的原因，虽然利润率最高值应用于#wrapper指定类，似乎浏览器以某种方式将其应用到H1类，现在H1类在顶部有10％的边距！ （这就是为什么你看到我的网站在绿色行上方有很大差距）

这是怎么回事？

Tks！

Answer 1

发生此问题的原因是header有float: left;，并且header真的没有理由拥有该属性。

如果添加浮动修复的h1保证金可以转而加入这个“clearfix”：

header::before { 
    content: ''; 
    display: table; 
    clear: both; 
}