html - 为什么 margin-top 从网站顶部开始计算，而不是上面的元素？

Question

我想我错过了一个非常重要的 css 规则，以确保当我使用 margin-top 时，图像下方的页脚和 H1 元素之类的东西将无法识别图像并开始使用边距- 从那里开始。

示例:我必须使用 margin-top: 50px;获取图像下方的 H1 元素，否则文本将显示在图像上而不是下方。

现在使用 h1 {MARGIN-TOP: 50px;} 时它是如何工作的:

main {
    margin: 0 auto;
    width: 960px;
}

body {
    margin: 0;

}

/*navigation*/

#navigation {
    font-family: 'Aller Display';
    color: black;

}

#logo {
    float: left;
    width: 229px;
    height: 100px;
    margin-left: 52px;
    margin-top: 0;
    clear: both;

}

#mobilemenu {
    display: none;
}

#navigation_list {
    float: right;
    overflow: hidden;
    }

#navigation_list li {

    display: inline-block;

}

#navigation_list li a {
    margin-top: 0;
    line-height: 75px;
    margin-right: 10px;
    font-size: 24px;

}

#navigation_list li a:hover {

    color: #f07c00;

}

#rightnav {
    margin-right: 22px;
}

/*overzicht gerechten*/
h1.overzichtger {

    font-family: 'Aller Bold';
    margin-left: 150px;
    font-size: 28px;
    margin-top: 50px;


}

div.centerimg {

    text-align: center;

}

img.imgoverzichtgerechtlinks {
    float: left;
    width: 470px;
    height: 176px;
    overflow: hidden;

}

img.imgoverzichtgerechtrechts {

    float: right;
    width: 470px;
    height: 176px;
    overflow: hidden;


}


/*footer*/

footer {

    font-family: 'Aller Bold';
    margin-top: 15px;
    font-size: 21px;
    height: 55px;
    background-color: #f07c00;
    color: black;
    line-height: 55px;
    width: 100%;
}

#test {
    float: right;
    display: inline-block;

<main>

    <nav id="navigation">
        <img src="logo.jpg" id="logo">
        <a id="mobilemenu" class="menu_button" href="#footer_nav" onclick="toggleNav(); return false;">&#9776;  MENU</a>
        <ul id="navigation_list" role="navigation">
            <li><a href=#>Nieuws</a></li>
            <li><a href=#>Info</a></li>
            <li><a href=#>Bezienswaardigheden</a></li>
            <li><a href=#>Keuken</a></li>
            <li id="rightnav"><a href=#>Steden</a></li>
        </ul>
    </nav>

        <br> <br>



        <img src="geroverzicht1.jpg" class="imgoverzichtgerechtlinks">
        <img src="geroverzicht2.jpg" class="imgoverzichtgerechtrechts">
        <br><br>
        <div class="test">
        <h1 class="overzichtger">Pepernoten</h1>
            </div>



    <footer>
        <div id="test">
        </div>
    </footer>


</main>

不知道该怎么做了，我一直在检查关于同一问题的 stackoverflow 上的其他主题，并且我添加了 overflow: hidden 到两张图片，因为它们是 float 的。

Answer 1

发生这种情况是因为您将两个图像 float 在 h1 上方。当您 float 一个元素时，它会“从文档流中取出”，并告诉渲染引擎“在它旁边”显示后续元素。

那么发生的是你的 <div class="test"> (包含 h1 的那个)试图靠近您 float 的两个图像。

可能的解决方案:

1. 设置<div class="test">至 clear:both ，这基本上是在指示浏览器不要在其旁边放置任何内容，无论前面的 float 元素说什么。

2. 不要使用 float 。将图像设置为 display: inline-block ，这似乎是你想要做的。不要忘记设置 vertical-align也。这部分是为什么 display:inline-block 的原因。被发明 - float 布局可能会令人困惑且难以管理。

此外，尽量不要使用 <br>在你的代码中创造空间。还要注意 <main>并非所有浏览器都支持标记。