Html CSS浮动元素折叠父元素

我对stackoverflow和web开发都是新手，非常感谢您的耐心。）
所有HTML和CSS减去某些不相关的部分都可以在最底部找到

---

在使用CSS设置HTML元素的样式时，我遇到了浮动元素及其父元素的问题。id为nav和main的div包含在id内容的div中。nav包含一个无序列表，它将作为排序的基本导航栏，而main包含页面的段落和“内容”。我希望这些段落位于导航栏的右侧，所以我决定将它们都浮动起来

下面的CSS应用于这些元素

---

---

当我在浏览器中运行代码时，一切看起来都很好。将元件放置在适当的位置。但是，在使用检查工具进行仔细检查时，id内容为的父元素已崩溃。

不幸的是，我不能发布的形象，因为我缺乏声誉。希望这是足够的信息。 我已经在网上搜索过这个问题，在像我这样的新手中似乎很常见。我读了一篇关于的文章，我尝试了他们解决这个问题的方法。不幸的是，这是徒劳的。经过进一步的搜索，我被弄糊涂了。我想为这个问题的广泛性道歉。谢谢你们的时间和知识。


这是HTML

---

---

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

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

.clearfix:after {
  clear: both;
}

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

在父元素上使用clearfix类，例如在#content元素上：

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

[...]

查找有关清除浮动的更多信息

---

顺便说一句：欢迎访问stackoverflow:）

您的具体（相关）HTML是什么？请不要向我们描述，让我们看看。我道歉。HTML和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;

}

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

.clearfix:after {
  clear: both;
}

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

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