Question

我有一些非常简单的代码。它是这样的：

<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Home Index Test</title>
    <link rel="stylesheet" type="text/css" href="reset.css" media="all">
    <link rel="stylesheet" type="text/css" href="styles.css" media="all">

<!--    <script type="text/javascript" src="view.js"></script> -->
</head>
<body>

<div id="wrapper">
    wrapper
    <div id="header">
        <div id="logo">
               <img src="kimchi_img/bibi_logo.jpg">
        </div>

        <div id="login_menu">
            <p>About  Contact | Sign In  Register </p>
        </div>
    </div>
</div>

</body>
</html>

简单，对吗？用于捆绑所有内容的包装类，包含徽标和菜单的标题块。但是当我在Firebug中查看它时，它就像包装类没有任何东西一样。我知道在Firefox中，div元素必须包含一些东西才能显示出来。所以我尝试了一点测试 - 我将“包装器”这个词放在包装器类中，如上所示。好吧，现在它出现了，但它的行为就像“包装器”只有一行长。我觉得我错过了这一过程中的重要一步。这是相关的CSS：

#wrapper {
    clear:both;
    margin:0 auto;
    padding:0;
    width:960px;
}

#header{
    width:960px;
}

#logo{
    float:left;
    width: 380px;   
}

#login_menu{
    float:left;
    text-align: right;
    width:580px;
}

我后面还发出了reset.css的咕噜声，但它没有清除它。

Answer 1

每当您有一个容纳浮动元素的容器时，除非您为容器指定显式overflow，否则容器将崩溃。将其添加到#wrapper或#header：

overflow: hidden;

现在这将（当然）在IE6中失败。为了解决这个错误，我通常会在规则中添加以下内容：

-height: 1px;
-overflow: auto;

在这里，我使用- hack来定位IE6，但如果您不想使用黑客攻击，只需将这两个属性（不带连字符）移动到单独的样式表中，并通过条件注释将其链接。

Answer 2

另一个解决方案是使用

添加一个空div

style="clear:both;"

在包装器的底部。

我的包装类不是“持有”任何东西

2 个答案: