Question

我不知道如何总结我的情况，但这里是显示问题的简化代码（index.html）：

<html>
   <body>
      <div id="wrapper" class="divide">
          <div id="top" class="divide">
                ....(all of its contents)....
          </div>
          <div id="content" class="divide">
              <div id="left">
                  ....(all the contents)....
               </div>
               <div id="right">
                  ....(all the contents)....
               </div>
           </div>
       </div>
       <div id="footer">
       </div>
    </body>
 </html>

（style.css文件）

.divide{
   margin-left:auto;
   margin-right:auto;
   width:960px;
 }

 body {
   background-color: #666600;
 }
 #left {
     ......
     ......
     float: left;
 }

  #right {
     ......
     ......
     float: left;
 }

 #wrapper{
    background-color:#ffffff;
  }

所以在这里我希望“包装”div背景为白色，并且它周围的身体背景有另一种颜色（在这里我把棕色）。这适用于“top”div，但不适用于“content”div（因此，它的所有子节点）。 “content”div与body具有相同的背景颜色，这对我来说没有意义，因为“wrapper”div确实包含“content”div。

换句话说，“包装”div似乎没有达到“内容”div和它的所有孩子。这个问题有解决方法吗？如果您需要其他信息，请通知我。谢谢你的帮助！

注意：正如我们有帮助的人指出的那样，div元素中的浮动属性确实会导致上述问题。我没有意识到这一点。这就是为什么我没有把浮动属性放在首位。所以我只是编辑了上面的代码，以便我们知道是什么导致了它。和平！

Answer 1

您是否有任何浮动元素，例如#left和#right？

如果是，您需要clear your floats。

一种方法是将overflow: hidden添加到#wrapper。

您还应该在HTML中修正一个小错误：</left>到</div>。

Answer 2

如果你浮动你的内容div，你可能会遇到不清除浮动的问题。尝试将overflow:auto添加到您的包装器div

Answer 3

我把你的代码放到JSFiddle中并得到了这个：http://jsfiddle.net/XPLWR/，它看起来很好。

用另一个div包装一个包含div

3 个答案: