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

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

在其下添加div：

.someClass {
     clear: both;
}

@H_489_7@有助于.但更容易的是：

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

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

@H_489_7@Source

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

@H_489_7@编辑：

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

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

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

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