html - Div 背景不显示

Question

我有一个奇怪的问题。

CSS 为 .article-container 设置的背景和 <article>根本不显示(既不显示图像也不显示颜色)。为 <article> 设置的背景 child 展示属性(property)。

页面: http://new.elenaakulova.com.ua/ .

或者代码:

<div id="article-container">
  <article id="about-me">
    <div id="photo">
      <img src="http://placehold.it/300x404" width="300px">
    </div>
    <div id="description">
      <hgroup>
        <h2>психолог</h2>
        <h1>Вася Пупкин</h1>
      </hgroup>
      <p>Здравствуйте!</p>
    </div>
  </article>
</div>

和

#article-container {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  background: white;
}

#article-container > article {
  background: white;
}

#about-me #description {
  float: left;
  background: blue;
}

Answer 1

你需要添加overflow: hidden;到#article-container

Floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, and elements with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts. In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

block 格式化上下文清除 float 。来源:http://www.w3.org/TR/CSS2/visuren.html#block-formatting