html – 保证金不使用浮动元素

在我的网页上,我有一个徽标和一个菜单,组成标题元素和一个英雄单位.
现在我想给它一些底部边距,以便之间有足够的负空间
标题和英雄单位,但这个底部边距(100px)不适用.
如果我试图从英雄单位给出最高边距,同样的事情.

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

这是我的工作样本JS BIN

解决方法

在其下添加div：

.someclass {
     clear: both;
}

有助于.但更容易的是：

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

如果你添加溢出：隐藏;尽管它们被浮动,但浏览器将被迫计算其中元素的大小.计算大小时,它也知道从哪里开始边距底部.

One more popular uses of setting overflow,strangely enough,is float clearing. Setting overflow doesn’t clear the float at the element,it self-clears. This means that the element with overflow applied (auto or hidden),will extend as large as it needs to encompass child elements inside that are floated (instead of collapsing),assuming that the height isn’t declared.

Source

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

编辑：

由于这个问题显然仍然活跃,我将在今天添加最常见的解决方法：

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

这与第一种方法相同,但无需添加其他元素.如果设置溢出不是一个选项(或者即使它是一个选项,这会更好),这是要走的路.

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