html - 溢出隐藏不生效

Question

我显然在使用 overflow:hidden 作为 float 。我在页眉部分使用了它，但由于某种原因它没有生效，我在导航列表下方的图像与 nav 保持在同一行。列表和标题并且由于某种原因减少了宽度。

我哪里错了？我已经检查并交叉检查，但我确保我没有遗漏 html 中的任何标记，并使用 overflow: hidden 作为 CSS 中的 header。

/*
***************
=Header
***************
*/
header {
  overflow: hidden;
}
header h1 {
  width: 200px;
  height: 23px;
  float: left;
}
/*
***************
=Navigation
***************
*/
nav {
  float: right;
}
nav li {
  display: inline;
}
/*
***************
=Banner
***************
*/
.banner {
  background: url("../img/TitleImage.jpg") no-repeat;
  /*width:1000px;*/
  height: 231px;
}
.callout {
  background: black;
  height: 231px;
}

<div class="container_12">
  <header>
    <h1> Black + White </h1>
    <nav>
      <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">Our Services</a>
        </li>
        <li><a href="#">How we work</a>
        </li>
        <li><a href="#">Testimonials</a>
        </li>
        <li><a href="#">Work Examples</a>
        </li>
      </ul>
    </nav>
    <div class="banner grid_10">
      <p>Some slick phrase would go in here to sum up .</p>
    </div>
    <div class="grid_2 callout"></div>
  </header>
  <div class="main">
    <div class="grid_10">
      <div class="grid_5">
        <h1>Services we offer </h1> 
        <p>This is sample text to check the formatting and practice html with css. It seems to come easy. I wonder why I never tried it before.</p>
        <p>This is just another paragraph for testing purpose.</p>
        <p> <a href="#" class="button"> Read more </a> 
        </p>
      </div>
      <div class="grid_5">
        <h1>How we work </h1> 
        <p>This is sample text to check the formatting and practice html with css. It seems to come easy. I wonder why I never tried it before.</p>
        <p>This is just another paragraphn for testing purpose.</p>
        <p> <a href="#" class="button"> Read more </a> 
        </p>
      </div>
    </div>
    <div class="grid_2">
      <blockquote>
        <p>sample block quote goes here in the website</p>
      </blockquote>
    </div>
    <footer>
      <p> <strong>black+white</strong> themes via <a href="#"> theme forest</a> 
      </p>
    </footer>
  </div>
</div>

Answer 1

overflow:hidden，在 float clearing-context 中，将一个元素包裹在它的所有 float 子元素周围，随后的兄弟元素将出现在 之后文档流中具有overflow:hidden 的元素。

也就是说，nav 和 .banner 出现在同一个元素(header)中，所以应用 overflow:hidden 在 header 这里不会帮助你实现你想要的。

只需设置 .banner 即可清除所有 float :

.banner { 清除:两者； }