Question

我显然使用overflow:hidden作为花车。我在标题部分使用过它，但由于某种原因它没有生效，我在导航列表下面的图像与nav在同一行中。列表和标题，由于某种原因减少了宽度。

我在哪里出错？我已经检查并交叉检查但是我确保我没有错过html中的任何标记，并在CSS中使用overflow: hidden作为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，在一个浮动清除上下文中，围绕所有浮动子项包裹一个元素，随后的兄弟姐妹将出现元素{{ 1}}在文档流程中。

话虽如此，overflow:hidden和nav出现在同一元素（.banner）中，因此在此header上应用overflow:hidden无助于您实现你想要什么。

只需设置header即可清除所有花车：

.banner

Answer 2

你有两个浮动元素：H1和导航。 H1是左，导航是对的。然后，当然，.callout来自.banner，它不适合你的清算。在包含.banner之前，您需要解决这两个浮点数（h1和/或nav）。

溢出隐藏不生效

2 个答案: