CSS中添加浮动，但是背景看不见了
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS中添加浮动，但是背景看不见了相关的知识，希望对你有一定的参考价值。
在父div中添加了背景图片，子div使用了浮动，但是背景图片看不见了，这事什么愿意造成的
感谢！各位朋友的帮助！
在还没有看到问题的答案前，我通过给父div与子div设置Z-index解决的。
不知道这个方法怎么样？会不会出现其它什么问题？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery模拟select控件</title>
<style type="text/css">
.header
width:1000px;
height:86px;
background:url(../bg1/bg.png) repeat-x;
z-index:-1;
.logo
float:left;
margin-top:3px;
margin-bottom:0px;
width:380px;
z-index:0;
.xiala
float:right;
margin-top:-10px;
width:200px;
font-family:黑体;
margin-right:30px;
margin-left:auto;
text-align:right;
z-index:0;
#daohang
float:right;
width:550px;
margin-bottom:12px;
#daohang li
float:left;
#daohang ul
list-style-type:none;
#daohang li a
width:80px;
text-align:center;
display:block;
text-decoration:none;
border-left:1px solid #999;
margin:1px;
</style>
</head>
<body>
<div class="header">
<div class="logo">
<img src="../bg1/bg_left_top2.png" />
</div>
<div class="xiala"><!--这部分是下拉菜单-->
<form method="post" style="width:200px; text-align:center;">
<p><label for="xiala">哈贝利日化：</label>
<select name="xiala" id="xiala">
<option value=" http://www.shhbl.cn/ " class="zonggongsi">总公司</option>
<option value=" http://www.dlhbl.cn/ " class="dlhbl">大连分公司</option>
<option value=" http://coco8558.b2b.hc360.com/ " class="bjhbl">北京分公司</option>
</select></p>
</form>
</div>
<div id="daohang">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">企业简介</a></li>
</body>
</html> 参考技术A 父级元素没有浮动，而它的内部元素浮动的话，它是没有高度的，因为它内部元素脱离的文档流，所以容器层的高度是不会被撑开的
就是浮动过后 父级元素高度自适应的问题
所以很多都是直接加上一个层来清除浮动
或者使用clearfix
/*浮动后的自适应高度*/
.clearfix:after
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
.clearfixdisplay:inline-block;
/* Hide from IE Mac */
.clearfix display:block;
/* End hide from IE Mac */
/* end of clearfix */
clearfix 给父级元素加上这个class就行本回答被提问者采纳 参考技术B 子div使用了浮动后就脱离了普通文档流，于是父div的高度就成了0px ,解决办法是为其父div设置一个高度，或为其设置一个清除浮动的内容如：
<div>
<div style="float:left;width:50%;">子</div>
<p>环绕文字</p>
<div style="clear:both;"></div>
</div> 参考技术C 设置子DIV的高度。。或者在浮动的DIV后面加一个<div style="clear:both"></div> 参考技术D 将子DIV设置背景透明.
以上是关于CSS中添加浮动，但是背景看不见了的主要内容，如果未能解决你的问题，请参考以下文章