1

所以这可能是需要对 HTML/CSS 代码进行的非常小的调整，但这是我一直面临的问题。我的一般 HTML 页面代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<link href="sites/css/style.css" rel="stylesheet" type="text/css" />
<title>My Page</title>
</head>
<body>
<div class="wrapper">
    <div class="header">Header</div>
        <div class="navbar">
            <ul>
                <li>Home</li>
                <li>About</li>
                <li>Services</li>
            </ul>
        </div>
 <div class="main_content">


 </div>
 <div class="footer">Copyright &copy; 2012-2013.</div>
 </div>
 </body>
 </html>

.wrapper 类的 CSS 如下：

 .wrapper {
     border: 1px solid #ddd;
     margin-left: auto;
     margin-right: auto;
     width: 980px;
  }

我发现当我将内容放入页面上的任何其他 DIV 时，尤其是在使用 float:left; 时。或浮动：对；除非我使用一个名为的类，否则包装器的边框不会在页面下方继续：

  .clearer {
      clear: both;
  }

并放一个 DIV：

  <div class="clearer"></div>

在每个浮动的 DIV 的底部。有什么我在这里做的不对还是这是一个常见问题？

任何帮助或建议表示赞赏！

谢谢！

戴夫。

4

1 回答 1

1

这是一个常见问题，您通常可以通过添加overflow: auto到#wrapper. 如果这不起作用，您的clearer解决方案是另一种常用的替代方案。

于 2013-09-29T13:45:16.070 回答