出于某种原因，我的容器不会在其他元素周围环绕边框。现在它只是在标题周围环绕边框。已经检查了 css 和 html 的验证器，但它们没有显示错误。谁知道这是什么问题？
HTML:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<title>Site Tite in Browser</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="container"> <!-- Container Start -->
<div id="header">
<div class="site-title">Site Title</div>
<div class="site-description">a description of the site</div>
</div>
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
<div id="content"> <!-- Content Start -->
<h2>Title</h2>
Sample text
</div> <!-- Content End -->
<!-- Sidebar Start -->
<div id="sidebar">Sidebar</div> <!-- Sidebar End -->
<div id="footer">Copyright © [sitename]</div>
</div> <!-- Container End -->
</body>
</html>
这是 CSS:
body {
background:#990000;
margin:0;
padding:0;
}
#container {
width:960px;
background:#fff;
padding:10px;
margin:10px auto 10px auto;
border-width:5px;
border-style:double;
border-color: #000000;
}
/* Header Start */
#header {
background:url(images/header.jpg) top left repeat-x #fff;
width:960px;
height:150px;
margin:0;
padding:0;
}
.site-title {
color:#fff;
margin:0;
padding:10px;
font-weight:normal;
font-size:24pt;
}
.site-description {
text-align:right;
padding:50px 10px 10px 10px;
color:#fff;
font-size:12pt;
font-weight:bold;
}
/* Menu Start */
#menu {
margin:10px 0 0 0;
padding:0 10px 0 10px;
height:37px;
width:940px;
border:1px #000000;
}
#menu li {
list-style:none;
margin:0;
padding:0;
display:inline;
}
#menu li a {
font-weight:bold;
font-size:12pt;
text-decoration:none;
padding:0 10px 4px 10px;
display:block;
margin:0;
line-height:33px;
float:left;
}
#menu li a:hover {
color:#000000;
}
/* Main Content Start */
#content {
margin-top:10px;
width: 500px;
overflow : auto;
float: left;
background: #ffffff;
border: 1px;
}
/* Sidebar Start */
#sidebar {
margin-top: 10px;
width:400px;
height:auto;
float:right;
font-weight:bold;
text-align:center;
padding:5px;
background: #ffffff;
border:10px solid #fff;
}
/* Footer Start */
#footer {
clear:both;
width: 950px;
margin-top: 10px;
float: left;
height: 40px;
border-top:1px solid #000000;
color:#000000;
text-align:center;
font-size:12px;
}
/* Format Start */
a {
color:#990000;
}
最佳答案
float 内容不占用 DOM 中的垂直空间，事实上，当您 float 某些内容时，您应该考虑将其从 DOM 中剥离。为了解决这个问题，你应该在你的容器底部添加一个 clear，里面有 float 元素。
所以在你的 HTML 的末尾，你应该有这样的东西。
<div id="sidebar">Sidebar</div> <!-- Sidebar End -->
<div id="footer">Copyright © [sitename]</div>
<div style="clear:both;"></div> <!-- Clears the floated content -->
</div> <!-- Container End -->
对于“在我看来”更高级、更漂亮的解决方案，您可以查看此链接。 HTML/CSS: Clear floating elements in the middle without adding unneeded tags
关于html - 网站容器不会包装？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22417959/