我正在学习html和css，我目前正在使用这个代码。一切都很好。我一点一点地添加代码然后它没有按预期工作。这是代码：
<!doctype html>
<html lang="en-us">
<head>
<title>Home</title>
<style>
nav, header{ display: block;
}
nav[role="navigation"]{
background-color: red;
font-family: Helvetica;
text-transform: uppercase;
width: 100%;
}
nav[role="navigation"] li{
float: left;
}
nav[role="navigation"] li a:hover {
color: #fff;
}
nav[role="navigation"] ul {
margin: 0px;
}
nav[role="navigation"] a {
float: left;
margin: 0.625em 2em .625em 0;
text-decoration: none;
}
header{
background: #e3e0d9;
}
#container {
width: 95%;
/* 10px / 16px top
10px / 948px right and left
24px / 16px bottom
*/
padding: 0.625em 1.05% 1.5em;
margin: 0 auto;
background-color: yellow;
}
aside{
float: right;
background-color: cyan;
/* 300px / 948px */
width: 31.64%;
}
aside img, .main img, .slats img{
width: 100%; /* occupy 100% of container */
max-width: 100%;
}
ul.tags li{
float: left;
font-size: 14px;
margin: 0 5px 5px 0;
}
ul.tags li a{
background: #9D0000 url(tag-bg.png) no-repeat 0 50%;
color: #fff;
float: left;
font-weight: normal;
padding: 5px 10px 6px 25px;
}
.main{
background-color: pink;
float: left;
/* 624px / 948px */
width: 65.82%;
/* 24px / 948px */
margin-right: 2.53%;
}
</style>
</head>
<body id="top">
<!-- start of navigation-->
<nav role="navigation">
<div class="inner">
<ul class="nav">
<li class="active"><a href="#">Football</a></li>
<li><a href="#">Baseball</a></li>
<li><a href="#">Soccer</a></li>
<li><a href="#">Tennis</a></li>
<li><a href="#">Ice Soccer</a></li>
<li><a href="#">Basketball</a></li>
</ul>
</div>
</nav>
<!--end of navigation-->
<!--start of header-->
<header role="banner">
<div class="inner">
<h1 class="logo"><a href="#"><img src="logo.png" alt="YetAnotherSportsSite" /></a></h1>
</div>
</header>
<!--end of header-->
<!-- start of container -->
<div id="container">
<!-- start of article -->
<article class="main" role="main">
<h1>That guy has the ball</h1>
<p class="summary">In what has to be considered a development of the utmost importance, that man over there now has the ball.</p>
<p class="articleinfo">By Rick Boucher | <time>January 1, 2012</time></p>
<section>
<img src="images/football.jpg" alt="Football" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan felis quis nibh pretium tempus. Nullam quis rhoncus massa. Vivamus laoreet convallis sem ac dapibus. Donec varius congue sem ac molestie. Nam purus neque, tincidunt ut aliquam dapibus, dictum a magna. Curabitur sagittis mi et ante aliquet tristique vitae nec justo. Quisque id tellus et quam pharetra lacinia nec id eros. Praesent fermentum dui id tellus aliquam tincidunt. Suspendisse eu ante sed est vestibulum dictum at sit amet nulla. Sed sed leo at ante consequat ullamcorper. Fusce mattis, justo sed eleifend bibendum, nunc risus pharetra est, ut rutrum libero justo et leo. Maecenas felis orci, porttitor eu venenatis vel, posuere in arcu. Phasellus sagittis pretium purus, vel semper massa aliquet sit amet.</p>
<p>In hac habitasse platea dictumst. Sed vitae libero et dui lobortis accumsan et non nisi. Suspendisse commodo purus vitae risus rutrum eget scelerisque erat vehicula. Nullam eu nunc purus. Nulla rutrum laoreet magna eu pharetra. In libero dolor, varius sed tempor quis, tempus a turpis. Nullam suscipit, nisi a cursus viverra, sapien dolor scelerisque mauris, auctor mattis leo ante auctor enim. Suspendisse nec sodales risus. Donec suscipit, justo eu tincidunt venenatis, metus odio rhoncus quam, mollis accumsan diam eros quis lectus.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean facilisis placerat dolor ut mattis. Duis vitae sem sapien. Vivamus orci mauris, ornare in fringilla vitae, pulvinar ut orci. Fusce pellentesque leo id arcu varius elementum. Vivamus id odio ac sapien pulvinar rutrum ut vitae libero. Nam eget rutrum mauris.</p>
<p>Curabitur ultrices dictum eros sed dignissim. Nam blandit iaculis tincidunt. Proin semper, arcu in cursus tincidunt, orci neque congue nunc, eu sodales enim diam eu ligula. Donec condimentum consequat convallis. Sed id est nisi, eleifend gravida justo. Sed consectetur posuere magna sit amet imperdiet. Vestibulum rhoncus nisl vel sapien viverra eget feugiat magna cursus. Nullam scelerisque ultricies lacus vel sodales. Aliquam felis magna, interdum placerat viverra non, sodales eget augue. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent nec neque quis odio hendrerit auctor nec vel erat. In ullamcorper nulla sed ipsum elementum varius. Morbi et sapien ac nisl suscipit tincidunt. Sed lacus nisl, tempus vel ultrices vel, vulputate a nunc. Suspendisse in diam vitae nulla tempor vulputate quis ac nunc.</p>
<p>Nam in dui eget augue malesuada adipiscing ac at massa. In sed auctor libero. Quisque egestas mollis lobortis. Vivamus lacinia metus at quam posuere condimentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam ipsum mauris, facilisis ut pharetra ut, lacinia vitae velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris imperdiet facilisis ligula, sed pharetra metus malesuada sed. Suspendisse tristique massa in magna posuere adipiscing. Ut semper magna facilisis justo dapibus vel auctor odio imperdiet. Donec non nulla fermentum erat condimentum ultrices et vel augue. Aenean aliquam neque ut nisi scelerisque sagittis. Phasellus quam odio, hendrerit et viverra sed, pellentesque vitae est. Praesent consequat, neque nec interdum accumsan, nibh lorem hendrerit arcu, et posuere nunc massa ac augue. Nam justo augue, consectetur sit amet tempus sit amet, faucibus ut magna. Donec semper, mi in adipiscing tincidunt, justo purus suscipit libero, dictum iaculis arcu augue a arcu.</p>
<p>Aliquam feugiat venenatis porttitor. Fusce feugiat, arcu tristique cursus dignissim, magna nulla facilisis tortor, sed rutrum nisl dolor a augue. Etiam a ornare libero. Fusce massa nulla, gravida nec volutpat eleifend, venenatis nec nunc. Nam pulvinar iaculis ligula a luctus. Fusce vulputate odio id purus dictum placerat. Nullam condimentum, sem ac mattis congue, mi enim interdum risus, id rhoncus velit neque et magna.</p>
<p>Pellentesque vestibulum rhoncus sollicitudin. Cras eget purus velit. Donec et quam elit, sed interdum diam. Fusce a dolor a elit tincidunt dictum et non orci. Integer aliquam vehicula elit at vehicula. Nam nec magna libero. Maecenas porttitor, tortor eget congue lobortis, dolor ligula cursus nulla, eget luctus sem tellus ultrices orci. Sed posuere egestas pretium. Fusce id arcu eu lectus suscipit malesuada et vel libero. Mauris nunc felis, auctor eu malesuada sed, elementum non felis. Praesent pellentesque suscipit commodo. Suspendisse commodo accumsan nisl ut consequat. Curabitur porta sapien a dolor facilisis in bibendum nibh rutrum. Nulla enim magna, dapibus sed auctor ac, pulvinar eu quam.</p>
</section>
</article>
<!-- end of article -->
<!-- start of aside -->
<aside>
<section class="related">
<h2>Related Headlines</h2>
<ul>
<li><a href="#">That Guy Knocked Out the Other Guy</a></li>
<li><a href="#">Your Favorite Sports Team Lost. Again.</a></li>
<li><a href="#">The Yankees Buy the Entire League</a></li>
<li><a href="#">Guy Says Something Stupid in the Heat of the Moment</a></li>
<li><a href="#">New Record Set as Neither Team Scores</a></li>
<li><a href="#">Why Haven't You Clicked One of Our Headlines Yet?</a></li>
</ul>
</section>
<section class="ad">
<img src="images/ad.png" alt="Boombox ad unit" />
</section>
<section class="article-tags">
<h2>Tagged</h2>
<ul class="tags">
<li><a href="#">Football</a></li>
<li><a href="#">Ball</a></li>
<li><a href="#">Field</a></li>
<li><a href="#">Upset</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Winning</a></li>
</ul>
</section>
<section class="soundbites">
<h2>Sound Bites</h2>
<blockquote>
..this much is clear to me. If I were in his
shoes, I would have already won 5 Super Bowls.
<cite><a href="#">-Guy with big ego</a></cite>
</blockquote>
<blockquote>
You play to win the game! Or at least, not to lose too badly.
<cite><a href="#">—Easy going coach</a></cite>
</blockquote>
</section>
</aside>
<!-- end of aside -->
<!-- start of more-stories -->
<div class="more-stories">
<h2>More in Football</h2>
<ul class="slats">
<li class="group">
<a href="#">
<img src="images/ball.jpg" alt="Look, it's a ball" />
<h3>kicker connects on record 13 field goals</h3>
</a>
</li>
<li class="group">
<a href="#">
<img src="images/goal_post.jpg" alt="And now, a goal post!" />
<h3>Your favorite team loses to that team no one likes</h3>
</a>
</li>
<li class="group">
<a href="#">
<img src="images/ball_field.jpg" alt="This ball is laying a field!" />
<h3>The Scarecrows Win 42-0</h3>
</a>
</li>
</ul>
</div>
<!-- end of more-stories -->
</div>
<!-- end of container -->
</body>
</html>
为什么nav宽度不再是100％且颜色red消失了，header现在浮在它旁边？
答案 0 :(得分：1)
您正在浮动导航中的元素，但从不清除浮动：
添加此规则以强制清除浮动的<li>元素
nav[role="navigation"] ul:after {
content : " ";
display: block;
height:0px;
clear:both;
float:none;
visibility: hidden;
}
为什么要清除浮子？ Read Here
使用花车的一个更令人困惑的事情是如何 它们可以影响包含它们的元素（它们的＃34;父母＆＃34; 元件）。如果这个父元素只包含浮动的内容 元素，它的高度将完全崩溃到零。这个 如果父母不能直观地包含任何东西，那么它并不总是显而易见的 明显的背景，但重要的是要注意。
答案 1 :(得分：0)
nav[role="navigation"] li{
display: inline-block;
}