CSS背景样式在对部分元素进行样式时无法生效。

Question

我有一个想要设置特定背景颜色的区域。如果不在其中样式化文章元素，则可以正常工作，但是如果样式化它，则该区域将“消失”。 以下是HTML代码：

<section id="news"> 
    <article> 
        <h3>News Item #1</h3>
        <p>This is a paragraph.</p>
        <a href="#">Read More</a>
    </article>
    <article> 
        <h3>News Item #2</h3>
        <p>Place any important lines</p>
        <a href="#">Read More</a>
    </article>
</section>

因此我添加了以下CSS来更改背景：

   #news { 
    background: #5D9B4C;
    max-width: 900px;
    margin-top: 30px;
   }

它可以工作。然而，当我尝试在新闻部分内部为文章设置样式时，整个部分的背景颜色消失了。

   #news article  { 
        float: left;
        width: 280px;
        margin-left: 20px;
        margin-bottom: 30px;
    }

这种情况发生的原因是什么？

非常感谢您提前的帮助。

- Maira

Answer 1

这就是关于浮动的全部内容了。有很多技巧可以实现正确结果。建议调查All About Floats。

例如：

   #news {
     background: #5D9B4C;
     overflow: hidden;
   }
   
   #news article {
     float: left;
     width: 50%;
   }

<section id="news"> 
    <article> 
        <h3>News Item #1</h3>
        <p>This is a paragraph.</p>
        <a href="#">Read More</a>
    </article>
    <article> 
        <h3>News Item #2</h3>
        <p>Place any important lines</p>
        <a href="#">Read More</a>
    </article>
</section>

- form3

---

完美！浮动在该部分内导致其崩溃。谢谢！ - Maira

Answer 2

在编程中，介绍一种浮点数类型的变量 section。

http://codepen.io/anon/pen/akwOVE

- Ramakay

---

嗨，这个方法可行，不过它把它向左移动了而不是居中显示？谢谢！ - Maira

请使用width替代max-width，并设置margin: 0 auto。http://codepen.io/anon/pen/akwOVE - Ramakay

Answer 3

将另一个元素浮动并不是一个解决方案，请使用clearfix。希望这可以帮到你，并记住当你浮动元素时，父元素需要清除子元素:D

   #news {
     display: inline-block;
     background: #5D9B4C;
     max-width: 900px;
     margin-top: 30px;
   }

  #news:before,
  #news:after {
    content: "";
    display: table;
  } 
  #news:after {
    clear: both;
  }
  #news {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
  }

   #news article {
     float: left;
     width: 280px;
     margin-left: 20px;
     margin-bottom: 30px;
   }

- Esmeraldi Bejolli

---

谢谢，这个也可以！:D - Maira