css - 为什么两个 div 的颜色相同？只有 1 被定义为绿色

Question

我有两个独立的 div，为什么它们的背景颜色都是相同的石灰色？我想要第一个 div 白色。 这是 HTML:

<div id="head1">
    <ul>
        <li><a class="menu" href="#">Link one</a></li>
        <li><a class="menu" href="#">Link two</a></li>
        <li><a class="menu" href="#">Link three</a></li>
        <li><a class="menu" href="#">Link four</a></li>
    </ul>
</div>

<div id="title1">
     <h1>some title</h1>
</div>

这是 CSS:

 #head1 {
 }
 #title1 {
     height:100px;
     background-color:lime;
 }
 ul {
     float:left;
     width:100%;
     padding:0;
     margin:0;
     list-style-type:none;
     border-bottom:2px aqua dashed;
 }
 li {
     display:inline;
 }
 a.menu {
     float:left;
     width:6em;
     text-decoration:none;
     color:#666666;
     padding:0.2em 0.6em;
     border-right:1px solid white;
 }
 a.menu:hover {
     background-color:#ff3300;
 }
 h1 {
     font-family: Gautami;
     font-size:300%;
     color: #FFFFFF;
 }

Answer 1

当您 float 列表时，#title div 基本上看起来好像在它后面。要更正此问题，请将 overflow:auto 添加到您的 #head1 元素

#head1 {
    overflow:auto;
}

jsFiddle example