在使用div+css進行網頁布局時，如果外部div有背景顏色或者邊框，而不設置其高度，在IE瀏覽器下顯示正常。但是使用Firefox/opera瀏覽時卻出現最外層Div的背景顏色和邊框不起作用的問題。網上查找資料之后主要原因如下：由於在Firefox和opera中：如果里面的DIV是浮動的（float）而母體不會去計算子體float之后的height。而在 IE中支持這種計算，所以IE下正常。
解決方法：
給外部div直接設置高度（不推薦），因為很多時候我們並不知道外部div的高度，我們希望靠里面的div來根據內容自動抻開外邊的div，除非你確定的知道外部的div的高度的情況下，所以不建議使用這種方法。
方法一：
在內部每個div后加一個清除浮動（推薦），這樣firefox和opera就把里面不當成浮動，會自動計算內部div高度
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
<div style="clear:both;"></div>
</div>
方法二：
在.outer中加一句overflow:hidden;
overflow 屬性規定當內容溢出元素框時發生的事情。如果外層設置了高度，並且高度小於內層占的實際高度，則內層一部分內容會被隱藏。
主要想強調的一點是，前面中提到的IE中能夠正常顯示僅限ie6，在之后的版本中同樣也無法設置顯示背景顏色。
上面的示例中必須給子元素其中之一添加高度，不然還是無法正常顯示背景顏色。實際測試時寬度為0，但父元素的背景顏色可以正常顯示。示例代碼：
<!doctype html>
<html>
<head>
<title>多列浮動</title>
<meta http-equiv="content-type" content="text/html" charset="utf-8"/>
<style type="text/css" media="screen">
body{
margin:0;
padding:0;
text-align:center;
}
#menu{
width:800px;
margin:0 auto;
text-align:left;
background:#ccc;
}
#menu ul{
float:left;
margin:0px;
padding:0px;
list-style:none;
}
#menu ul li{
float:left;
width:99px;
display:block;
line-height:30px;
text-align:center;
}
#menu .menudiv{
float:left;
width:1px;
height:20px;
background:#888；
margin-top:5px;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">菜單一</a></li>
<li class="menudiv"/>
<li><a href="#">菜單二</a></li>
<li class="menudiv"/>
<li><a href="#">菜單三</a></li>
<li class="menudiv"/>
<li><a href="#">菜單四</a></li>
<li class="menudiv"/>
<li><a href="#">菜單五</a></li>
<li class="menudiv"/>
<li><a href="#">菜單六</a></li>
<li class="menudiv"/>
<li><a href="#">菜單七</a></li>
<li class="menudiv"/>
<li><a href="#">菜單八</a></li>
<li class="menudiv"/>
</ul>
</div>
</body>
</html>
里面id為menu的元素雖然定義了背景顏色，但是由於子元素都設置了float屬性，所以無法正常顯示背景顏色。
解決方法一：給menu加上overflow:hidden;
解決方法二：直接在menu內ul外面添加<div style="clear:both;"></div> 就是說添加清除浮動的子元素即可
參考資料：http://lovephpor.blog.51cto.com/1850499/563540