Question

在我的网页上，我有一个徽标和一个菜单，组成标题元素和一个英雄单位。现在我想给它一些底部边距，以便之间有足够的负空间标题和英雄单位，但这个底部边距（100px）不适用。如果我试图从英雄单位给出最高边距，那就相同了。

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

这是我的工作样本JS BIN

Answer 1

在其下添加div：

.someclass {
     clear: both;
}

会有所帮助。但更容易的是：

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

如果添加overflow：hidden;尽管它们被浮动，但浏览器将被迫计算其中元素的大小。计算大小时，它也知道从哪里开始边缘底部。

设置溢出的一个更常见的用途，奇怪的是，浮动清除。设置溢出并不清除元素上的浮点数，它会自行清除。这意味着应用溢出的元素（自动或隐藏）将扩展到需要包含浮动内部子元素（而不是折叠）的大小，假设未声明高度。

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

编辑：

由于这个问题显然仍处于活跃状态，我现在将添加最常见的解决方法：

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

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

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

Answer 2

您可以在标题或包装标记中添加clearfix。这是包含在您的文件中的有用的css位。有关clearfix的更多信息，请点击此处

Answer 3

我认为这是您的保证金属性订单中的一个问题。

如果我改变您的财产：20px auto 100px;至： 20px 0px 100px 0px 然后我出现了底部空间。