级联分配时的div背景错误

Question

我在JSFiddle中创建了一个简单的HTML/CSS样本，以显示我的问题。我想在他们之间有多个部分。每个部分的宽度应为100％和本节中的内容区域。

通常，我的html/css似乎有效，但是当我想在另一个div（内容）中添加多个DIV并在左侧（博客）对齐时，另一个在右侧（侧栏）时包装器的背景（内容包）出错。我为内容带和大约打字的背景提供了相同的背景。两者都是灰色的。但是内容包装的背景颜色必须为绿色。

我的问题：

• 我的html/css有什么问题：为什么我对两个包装器都有相同的背景颜色，即使我在CSS中设置了不同的颜色？
• 这是此布局的好html/css吗？

html

<div class="page-wrapper">
  <div class="header-wrapper">
    <div class="header center">header</div>
  </div>
  <div class="content-wrapper">
    <div class="content center">
      <div class="blog">
        blog
      </div>
      <div class="sidebar">
        sidebar
      </div>
    </div>
  </div>  
  <div class="about-wrapper">
    <div class="about center">about</div>
  </div>
  <div class="footer-wrapper">
    <div class="footer center">footer</div>
  </div>
</div> <!-- end page-wrapper -->

CSS

.page-wrapper {
  width:100%;
  background-color: red;
}
.center {
     margin: 0 auto;
     width: 100px; 
}
.blog {
  float: left;
  width: 678px;
}
.sidebar {
  float: right;
  width: 300px;
}
.header-wrapper {background-color:yellow;width:100%;}
.content-wrapper {background-color:green;width:100%;}
.about-wrapper {background-color:gray;width:100%;}
.footer-wrapper {background-color:blue;width:100%;}
.header {
  width: 978px;
  background-color: red;
}
.content {
  width: 978px;
  background-color:blue;
}
.about {
  width: 978px;
  background-color: yellow;
}
.footer {
  width: 978px;
  background-color: green;
}

https://jsfiddle.net/1f867k3v/

Answer 1

在CSS .content类中添加overflow: hidden将工作您的代码。但是在这里，我根据HTML 5和CSS 3功能进行了修改。您的代码遵循HTML 4和CSS 2。

<div class="page-wrapper">
  <header class="header-wrapper">
    <div class="center">header</div>
  </header>
  <content class="content-wrapper">
    <section class="blog">
       blog
    </section>
    <aside class="sidebar">
       sidebar
    </aside>
  </content>  
  <div class="about-wrapper">
    <div class="center">about</div>
  </div>
  <footer class="footer-wrapper">
    <div class="center">footer</div>
  </footer>
</div> <!-- end page-wrapper -->

CSS

.page-wrapper {
  width:100%;
}
.center {
  text-align:center; 
}
.blog {
  flex: 2;
}
.sidebar {
  flex: 1;
}
.header-wrapper {background-color:yellow;}
.content-wrapper {background-color:green;display:flex;}
.about-wrapper {background-color:gray;}
.footer-wrapper {background-color:blue;}

https://jsfiddle.net/5x8qsnet/

Answer 2

您除了在.content街区内没有漂浮的孩子，因此它的高度塌陷为零。您需要添加.clearfix来解决：

.page-wrapper {
  width:100%;
  background-color: red;
}
.center {
     margin: 0 auto;
     width: 100px; 
}
.blog {
  float: left;
  width: 678px;
}
.sidebar {
  float: right;
  width: 300px;
}
.header-wrapper {background-color:yellow;width:100%;}
.content-wrapper {background-color:green;width:100%;}
.about-wrapper {background-color:gray;width:100%;}
.footer-wrapper {background-color:blue;width:100%;}
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.header {
  width: 978px;
  background-color: red;
}
.content {
  width: 978px;
  background-color:blue;
}
.about {
  width: 978px;
  background-color: yellow;
}
.footer {
  width: 978px;
  background-color: green;
}

<div class="page-wrapper">
  <div class="header-wrapper">
    <div class="header center">header</div>
  </div>
  <div class="content-wrapper clearfix">
    <div class="content center clearfix">
      <div class="blog">
        blog
      </div>
      <div class="sidebar">
        sidebar
      </div>
    </div>
  </div>
  <div class="about-wrapper">
    <div class="about center">about</div>
  </div>
  <div class="footer-wrapper">
    <div class="footer center">footer</div>
  </div>
</div>

这是此布局的好html/css吗？

答案取决于您问谁 - 我个人会使用Flexbox。