html - margin 相对于 parent ？

Question

您好!

我在这个网站上工作，但我一直遇到同样的问题。当我把边距放在百分比而不是像素时，它似乎是从包装器或页面中获取百分比。可能是一些愚蠢的错误，但我并没有真正使用过百分比。无论如何，我所说的类是“ Logo ”。

header
{
    width: 92%;
    margin-left: 4%;
    margin-right: 4%;
    height: 150px;
}

.logo
{
    margin: 10%;
    display: block;
    float: left;
    width: 25%;
    height: 90%;
}

HTML 标记如下所示。

    <header class="orange">
        <div class="logo purple">

        </div>
    </header>

它们被具有以下属性的包装器 (div) 包围:

.wrapper
{
    margin-left: auto;
    margin-right: auto;
    width: 1230px;
}

橙色和紫色只是背景色类的顺便说一句。感谢您的帮助!

更新 这是一张图片，在 Edge 中 btw ;)

Answer 1

问题是 float 。您需要在 float 后清除它。如果您使用 Bootstrap ，只需应用一个 clearfix 类，否则将其包装在一个行类中。

如果没有，请在此处阅读有关 clearfix 中的 css 的更多信息:https://css-tricks.com/snippets/css/clear-fix/