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