为啥我的图像背景在浮动：左上消失？
Posted
技术标签:
【中文标题】为啥我的图像背景在浮动：左上消失？【英文标题】：Why do my image background disappear on float: left?为什么我的图像背景在浮动：左上消失？ 【发布时间】：2010-01-14 04:20:59 【问题描述】：我想创建一个导航栏，每端都带有图像以使其更纯净。
所以，我在下面创建了 html 和 CSS，效果很好。我的菜单项在 ul/li 列表中。
当我设置列表样式以将所有项目放在一行上时，末端的图像会消失。那是怎么回事？我该如何解决？
罪魁祸首是 float: left;下面。
--- test.html ---
<html>
<head>
<link rel="stylesheet" href="test.css" type="text/css">
</head>
<body>
<div id="container">
<div id="header-usernav" class="span-6 last large">
<div id="header-usernav-leftside"><div id="header-usernav-rightside">
<ul>
<li>Register</li>
<li>Signin</li>
<li>Signout</li>
</ul>
</div></div>
</div>
</div>
</body>
</html>
--- test.CSS ---
#container #header-usernav
background: url('http://www.webcredible.co.uk/i/bg-i-resources.gif');
height: 28px;
background-repeat: repeat;
#container #header-usernav-leftside
background: url('http://www.webcredible.co.uk/i/nav-l-h.gif');
background-position: top left;
background-repeat: no-repeat;
#container #header-usernav-rightside
background: url('http://www.webcredible.co.uk/i/nav-r-h.gif');
background-position: top right;
background-repeat: no-repeat;
#container #header-usernav ul
list-style: none;
padding: 0;
margin: 0;
margin-left: 10px;
#container #header-usernav li
float: left;
padding: 0;
margin: 0 0.2em;
图片不同，可以复制粘贴html/css进行测试。
有什么关系？我做错了什么？
【问题讨论】：
【参考方案1】：我建议添加溢出：隐藏； （和缩放：1；保持 IE6 的跨浏览器兼容性）到容器 div，而不是添加一个清除 div。清除会使您的源代码膨胀。
#container #header-usernav ul
list-style: none;
padding: 0;
margin: 0;
margin-left: 10px;
overflow: hidden;
zoom: 1;
height: 28px; /* This is needed to ensure that the height of the rounded corners matches up with the rest of the bg.
【讨论】：
【参考方案2】：只有浮动的孩子，你的外部容器将返回 0px 的高度。因此，您可以在浮动元素之后立即放置以下内容：
<div class="clear"></div>
并添加以下规则：
.clear clear:both;
例如：
<div id="container">
<div id="header-usernav" class="span-6 last large">
<div id="header-usernav-leftside">
<div id="header-usernav-rightside">
<ul>
<li>Register</li>
<li>Signin</li>
<li>Signout</li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
</div>
【讨论】：
这似乎不适用于 Mac OS 上的 Safari 和 Firefox。 jsbin.com/ikige。 clearing div 必须紧跟在 UL 之后 虽然这种技术有效，但现在大多数人会使用 clearfix 的一些变体，因为它不需要添加额外的标记 - 请参阅 Chetan 或 Sasha 的答案。【参考方案3】：这是因为您的 div 没有高度。您可以在 UL 之后立即使用 clear: both 添加一个空 div。或者您可以将这些样式添加到 UL
width: 100%;
overflow: auto;
请参阅this 了解说明。
【讨论】：
【参考方案4】：在您的 CSS 中将 height: 28px; 添加到您的 ul。 Jonathan 和 Chetan 已经很好地解释了为什么会这样，但重申一下，浮动元素的父级不受浮动子级高度的影响。
【讨论】：
以上是关于为啥我的图像背景在浮动：左上消失？的主要内容，如果未能解决你的问题，请参考以下文章