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

2022-07-15 80酷酷网 80kuku.com

　　css|技巧|网页|问题

　　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 全部选择提示：你可先修改部分代码，再按运行]