溢出隐藏不生效

Question

我明显使用overflow:hidden浮点数。我在标题部分使用了它，但由于某些原因，它尚未生效，导航列表下方的图像与nav位于同一行。列表和标题，并由于某种原因减少了宽度。

我在哪里出错了？我检查并交叉检查，但我确保我没有错过任何html中的标签，并在header中使用overflow: hidden。

/* 
 
*************** 
 
=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，在浮动信息交流方面，环绕它的所有元素的浮动儿童和随后的兄弟姐妹会后元素出现在文档流overflow:hidden。

话虽这么说，nav和.banner出现在相同的元素（header），因此应用上headeroverflow:hidden这里不会帮助你实现你想要的。

只需设置.banner清除所有花车：

.banner { clear: both; }

Answer 2

你有两个浮动元素：H1和导航。 H1离开，导航是正确的。那么当然，.callout出现在.banner之后，它不适合你的清算。你需要在包含.banner之前解决这两个浮点数（h1和/或nav）。