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/

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

3 个答案: