0
我明顯使用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>
謝謝你的明確解釋。這工作:)。 –