html - 边距不适用于浮动元素

Question

在我的网页上，我有一个徽标和一个菜单，它们组成了标题元素和一个英雄单元。现在我想给它一些底部边距，这样标题和英雄单元之间就有足够的负空间，但是这个底部边距（100px）不适用。如果我尝试从英雄单位中获得最高利润，同样的事情。

.header {
    width: 95%;
    margin: 20px auto 100px;
}

这是我的工作示例JS BIN

score 19 · Accepted Answer

在它下面添加一个div：

.someclass {
     clear: both;
}

有助于。但更简单的是：

.header {
    width: 95%;
    margin: 20px auto 100px;
    overflow: hidden;
}

如果添加溢出：隐藏；浏览器将被迫计算其中元素的大小，尽管它们是浮动的。当计算大小时，它也知道从哪里开始margin-bottom。

奇怪的是，设置溢出的另一种流行用途是清除浮动。设置溢出不会清除元素处的浮动，它会自动清除。这意味着应用了溢出（自动或隐藏）的元素将根据需要扩展到包含浮动的子元素（而不是折叠），假设没有声明高度。

在这种情况下，auto 和 hidden 之间的区别在于，使用 hidden 时，它将隐藏溢出的所有内容，当它不再有足够的空间时，使用 auto 时，它将创建一个滚动条。

编辑：

由于这个问题显然仍然存在，我将添加当今最常见的解决方法：

.header:after {
    clear: both;
    height: 0;
    width: 100%;
    content: '';
    display: block;
}

这与第一种方法相同，但无需添加另一个元素。如果设置不是一个选项，这是要走的overflow路（或者即使它是一个选项，这会更好）。

当我第一次发布这个答案时，它不是一个选项，因为 IE 6 / 7 不支持它，当时它仍然被广泛使用。

score 0 · Accepted Answer

您可以将 clearfix 添加到您的标题或包装标签。这是包含在您的文件中的有用的 css 位。更多关于 clearfix 的信息可以在这里找到

score -1 · Accepted Answer

我认为这是您的边距属性顺序的问题。

如果我将您的属性更改为： 20px auto 100px; to: 20px 0px 100px 0px然后我有底部空间出现。