Xhtml&CSS

float导致父容器背景的不显示

作者:hayden 日期:2008-09-24

字体大小: 小中大

最近在一个CSS练习中碰到一个小问题
当几个并列元素使用float属性时，由于父容器没有定义实际高度(height)，在IE中显示出现问题，无法显示父容器的背景颜色或背景图片。
有印象以前也碰到过此类问题，虽说没解决，但也用其它方法（修改了结构层），但一直没在意这问题，也看到好多人为此问题而烦恼，希望大家同我一样，也有所收获！

子容器：使用float
父容器：不定义height

HTML代码

#nav  {
	margin-top:20px;
	background: #ca1717;
}
#nav li {float:left;}
#nav a:link,#nav a:visited {
	display:block;
	color:#eee;
	text-decoration:none;
	font-size:12px;
	height:28px;
	line-height:28px;
	padding:0 10px;
}
#nav a:hover {
	color:#222;
	background: #F3F2ED
}
	</style>
 </head>
 <body>
  <ul id="nav">
		
		<li><a href="http://www.mysuc.com/" title="www.mysuc.com">网站首页</a></li>
		<li><a href="#">查看留言</a></li>
		<li><a href="#">填写留言</a></li>
		<li><a href="#">联系方式</a></li>
		
	</ul>
 </body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

在测试中发现，父容器在不定义高度时，取消float属性，背景颜色显示正常~

子容器：不使用float
父容器：不定义height

HTML代码

#nav  {
	margin-top:20px;
	background: #ca1717;
}
#nav li {}
#nav a:link,#nav a:visited {
	display:block;
	color:#eee;
	text-decoration:none;
	font-size:12px;
	height:28px;
	line-height:28px;
	padding:0 10px;
}
#nav a:hover {
	color:#222;
	background: #F3F2ED
}
	</style>
 </head>
 <body>
  <ul id="nav">
		
		<li><a href="http://www.mysuc.com/" title="www.mysuc.com">网站首页</a></li>
		<li><a href="#">查看留言</a></li>
		<li><a href="#">填写留言</a></li>
		<li><a href="#">联系方式</a></li>
		
	</ul>
 </body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

而给父容器定义了高度后，再使用float则一切正常。

子容器：使用float
父容器：定义height

HTML代码

<!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=gb2312" />
	<meta http-equiv="Content-Language" content="gb2312" />
	<title> new document </title>
	<meta name="robots" content="all" />
	<meta name="generator" content="editplus" />
	<meta name="author" content="hayden@yeah.net,hayden" />
	<meta name="Copyright" content="mysuc.com" />
	<style type="text/css">
/* CSS Document */
#nav  {
	margin-top:20px;
	background: #ca1717;
	height:28px;
}
#nav li {float:left;}
#nav a:link,#nav a:visited {
	display:block;
	color:#eee;
	text-decoration:none;
	font-size:12px;
	height:28px;
	line-height:28px;
	padding:0 10px;
}
#nav a:hover {
	color:#222;
	background: #F3F2ED
}
	</style>
 </head>
 <body>
  <ul id="nav">
		
		<li><a href="http://www.mysuc.com/" title="www.mysuc.com">网站首页</a></li>
		<li><a href="#">查看留言</a></li>
		<li><a href="#">填写留言</a></li>
		<li><a href="#">联系方式</a></li>
		
	</ul>
 </body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

呵呵
CSS，太幽默了~

博主向您推荐的其它文章

相关日志

评论: 1 | 引用: 0 | 查看次数: -

日志信息

[本日志由 hayden 于 2008-09-24 01:26 PM 编辑]

文章来自: 本站原创

引用通告: 查看所有引用 | 我要引用此文章

Tags: float CSS DIV DIV+CSS

飞艳惊龙[2008-09-25 07:57 PM]

^_^，在父容器底部加个<div style="clear:both;"></DIV>就OK了，

发表评论

Name (required)
PassWord(游客发言不需要密码.)
正在加载编辑器...

禁止表情转换禁止自动转换链接禁止自动转换关键字记住我的信息,以便下次评论时不用输入用户名.

虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.