首页 > > 网页制作 > css >

DIV CSS网页布局技巧：background-color奇怪问题

2008-02-23 08:43:43来源：互联网阅读 ()

　　background-color奇怪的进入相临元素

　　这是一个非常奇怪的现象。目前还不清楚它形成的具体原因是什么，background-color会奇怪的进入相临元素中。看下面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="//www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css" > * { margin:0; padding:0; } .大块 { background-color:#FFC; } .浮动块 { width:100px; height:100px; float:left; background-color:#F00; } .清除浮动 { clear:both; } .正文部分 { margin-top:10px; } </style> </head> <body> <div class="大块"> <div class="浮动块"></div> <div class="信息">这里是一些文字</div> <div class="清除浮动"></div> </div> <div class="正文部分">神哪....怎么到了“大块”里面去了。</div> </body> </html>

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

　　我们仅设置了大块的背景色，正文部分是与大块相邻的一个元素。奇怪的是大块的背景色却进入了正文部分。解决的办法是给其中的一个元素加上position:relative;可以消除此现象。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="//www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css" > * { margin:0; padding:0; } .大块 { background-color:#FFC; } .浮动块 { width:100px; height:100px; float:left; background-color:#F00; } .清除浮动 { clear:both; } .正文部分 { position:relative; margin-top:10px; } </style> </head> <body> <div class="大块"> <div class="浮动块"></div> <div class="信息">这里是一些文字</div> <div class="清除浮动"></div> </div> <div class="正文部分">神哪....怎么到了“大块”里面去了。</div> </body> </html>

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