CSS浮动元素折叠父元素

Question

I am new to both stack overflow and web development, so your patience is greatly appreciated. 我对堆栈溢出和Web开发都是陌生的，非常感谢您的耐心等待。 :) :)
All of the HTML and CSS minus certain irrelevant parts can be found at the very bottom. 所有HTML和CSS减去某些不相关的部分都可以在底部找到。

When styling HTML elements with CSS, I encountered a problem with floating elements and their parent element. 使用CSS样式化HTML元素时，我遇到了浮动元素及其父元素的问题。 The divs with the ids nav and main are contained within the div of the id content . ID为nav和main的div包含在id 内容的div中。 The nav contains an unordered list, which will serve as a basic navigation bar of sorts, while main contains paragraphs and "meat" of the page. 导航包含一个无序列表，它将用作基本的导航栏，而main则包含页面的段落和“肉”。 I wanted the paragraphs to sit on the right side of the navigation bar, so I decided to float them both. 我希望这些段落位于导航栏的右侧，因此我决定将它们都浮动。

The CSS below was applied to these elements. 以下CSS应用于这些元素。

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

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

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

When I run my code in a browser, everything looks fine. 当我在浏览器中运行代码时，一切看起来都很好。 The elements are positioned in their proper places. 元素放置在适当的位置。 However, under closer examination using an examiner tool, my parent element with the id content has collapsed. 但是，在使用检查器工具进行仔细检查时，具有id内容的父元素崩溃了。

I unfortunately cannot post the image due to my lack of reputation. 不幸的是，由于缺乏声誉，我无法发布图片。 Hopefully this is enough information. 希望这是足够的信息。 I have already searched the web for the problem, and it seems quite common among newbies such as myself. 我已经在网上搜索了这个问题，这在像我这样的新手中似乎很常见。 I read an article on css-tricks.com , and I attempted their methods for solving this problem. 我在css-tricks.com上阅读了一篇文章，并尝试了他们的方法来解决此问题。 Unfortunately, this was to no avail. 不幸的是，这没有用。 After further searching, I have been left confused. 经过进一步的搜索，我一直感到困惑。 I would like to apologize for the broadness of this question. 对于这个问题的广泛性，我深表歉意。 Thank you all for your time and knowledge. 谢谢大家的时间和知识。

Here is the HTML.. 这是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>

Below is the CSS... 以下是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

In this case you can use the css clearfix class. 在这种情况下，可以使用css clearfix类。 Define the clearfix class in your css: 在CSS中定义clearfix类：

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

.clearfix:after {
  clear: both;
}

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

Use the clearfix class on the parent element, in your case on the #content element: 在您的情况下，在#content元素上，对父元素使用clearfix类：

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

Find more infos about clearing floats in this blog post . 在此博客文章中找到有关清除浮子的更多信息。

Btw: welcome on stackoverflow :) 顺便说一句：欢迎stackoverflow :)

CSS浮动元素折叠父元素

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-11-02 23:48:30

CSS浮动元素折叠父元素

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-11-02 23:48:30

解决方案1
1 已采纳 2014-11-02 23:48:30