为什么两个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

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

#head1 {
    overflow:auto;
}

jsFiddle example

Answer 2

它实际上是白色的。你只是看不到它。

因为ul（和其他元素）是向左浮动的，所以这些元素会从 DOM 的正常流程中取出。这基本上意味着父 div #head1 不再“看到”ul。因此，div 的高度变为 0px。

这是一个演示这个的小提琴：http://jsfiddle.net/w858z/

如您所见，#head1 有一个红色边框，但高度为 0px。如果我们移除浮动，则 ul 现在处于正常流程中。

这是删除了floats 的更新小提琴：http://jsfiddle.net/48Ahm/

解决此问题的方法是使用clearfix 或简单地使用overflow:auto。

溢出示例：http://jsfiddle.net/w858z/1/
clearfix 示例：http://jsfiddle.net/w858z/2/

这是一个讨论其他 css 属性的 stackoverflow，这些属性将导致元素从 dom 流中取出：What are the CSS properties that get elements out of the normal flow?

Answer 3

你只需要清除第二个div clear: both; 我做了一个jsfiddle： http://jsfiddle.net/5gwZ6/