Question

我是新手，无论是堆叠溢出还是网页开发，都非常感谢您的耐心等待。 :)
所有HTML和CSS减去某些不相关的部分都可以在最底层找到。

使用CSS设置HTML元素的样式时，我遇到浮动元素及其父元素的问题。具有ID nav 和 main 的div包含在id 内容的div中。导航包含一个无序列表，它将作为各种类型的基本导航栏，而main包含段落和＆＃34; meat＆＃34;的页面。我希望段落位于导航栏的右侧，所以我决定将它们都浮动。

下面的CSS适用于这些元素。

#nav {
width: 100px;
float: left;
}

#nav ul {
list-style-type: none;
padding: 0px;
}

#main {
width: 600px;
float: right;
}

当我在浏览器中运行我的代码时，一切看起来都很好。元素位于适当的位置。但是，在使用审查工具进行仔细检查后，我的父元素ID内容已折叠。

遗憾的是，由于我缺乏声誉，我无法发布图片。希望这是足够的信息。我已经在网上搜索了这个问题，而且像我这样的新手似乎很常见。我在css-tricks.com上阅读了一篇文章，并尝试了解决这个问题的方法。不幸的是，这无济于事。经过进一步搜索，我一直感到困惑。我想为这个问题的广泛性道歉。谢谢大家的时间和知识。

这是HTML ..

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <link rel="stylesheet" type="text/css" href="../css/refreshstyle.css">
</head>
<body>
    <div id="container">
        <div id="header">
            <h1>My Website</h1>
        </div>
        <div id="content">
            <div id="nav">
                <h3>Navigation</h3>
                <ul>
                    <li><a class="home" href="">Home</a></li>
                    <li><a class="about" href="">About</a></li>
                    <li><a class="contacts" href="">Contact</a></li>
                </ul>
            </div>
            <div id="main">
                <h2>Home Page</h2>
                <p></p>
                <p></p>
                <p></p>
                <p></p>

            </div>
        </div>
            <div id="footer">
                Copyright &copy;2014
            </div>
    </div>
</body>

以下是CSS ...

body {
background-image: url('congruent_pentagon.png');
}
#container {
background-color: white;
width: 800px;
margin-left: auto;
margin-right: auto;
border: 2px solid #a1a1a1;
border-radius: 25px;
}
#header {
background-color: #66CCFF;
color: white;
text-align: center;
padding: 10px;
border-bottom: 2px solid #a1a1a1;
border-top-right-radius:23px;
border-top-left-radius: 23px;
}
h1, h2, h3 {
margin:0;
}
#nav {
width: 100px;
float: left;
}
#nav ul {
list-style-type: none;
padding: 0px;
}
a {
text-decoration: none;
color: #66CCFF;
}
#nav .home {
font-weight: bold;
}
#main {
width: 600px;
float: right;
}
#content {
padding: 10px;
}
#footer {
clear: both;
background-color: #B1F6CB;
padding: 10px;
margin: 0px;
text-align: right;
border-top: 2px solid #a1a1a1;
border-bottom-right-radius: 23px;
border-bottom-left-radius: 23px;

}

Answer 1

在这种情况下，您可以使用css clearfix类。在css中定义clearfix类：

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1; /* ie 6/7 */
}

在#content元素的情况下，在父元素上使用clearfix类：

<div id="content" class="clearfix">
    [...]
</div>

在此blog post中查找有关清除浮动的更多信息。

顺便说一句：欢迎来到stackoverflow：）

CSS-Floated元素折叠父元素

1 个答案: