CSS浮动元素折叠父元素

我是新来的堆栈溢出和网站开发，所以你的耐心非常感谢。 :)
所有的HTML和CSS减去某些不相关的部分可以在最底部找到。CSS浮动元素折叠父元素

当造型与CSS的HTML元素，我遇到一个问题与浮动元素和它们的父元素。带有ID nav和主要的div包含在ID 内容的div内。导航包含一个无序列表，它将用作各种基本导航栏，而main包含页面的段落和“肉”。我希望段落位于导航栏的右侧，所以我决定将它们都浮在上面。

下面的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; 

}

来源

2014-11-02 John Henry

什么是您的具体（相关）的HTML？请不要*描述*给我们，*给我们看*。 – 2014-11-02 23:32:09

我的歉意。 HTML和CSS现在在我的文章的底部。 – 2014-11-02 23:54:24

在这种情况下，你可以使用css clearfi x类。定义clearfix类在你的CSS：

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

.clearfix:after { 
    clear: both; 
} 

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

使用父元素的clearfix类，你的情况＃内容元素：

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

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

btw：welcome to stackoverflow :)

来源

2014-11-02 23:48:30

非常感谢您的回复。我会花一些时间仔细阅读博客文章。希望这会解决我的问题。非常感谢您的宝贵时间！ :) – 2014-11-02 23:59:41

CSS浮动元素折叠父元素

回答

相关问题