奇怪的CSS3保证金问题

Question

我目前正在关注Team Treehouse网站上的教程视频，而这个奇怪的问题我无法理解。

我在此处上传了练习网站：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％的边距！ （如果你看看我的网站，你就会看到绿线上方有一个很大的差距）

这有什么问题？

韩国社交协会！

Answer 1

问题出现是因为header有float: left;，而header确实没有理由拥有该属性。

如果你添加浮动来修复h1的边距，你可以改为添加这个＆＃34; clearfix＆＃34;：

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