二话不说，先上代码：
<!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=utf-8" />
<title>定位与浮动嵌套test1</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
/*定义公共清除浮动类*/
.clear:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clear { display:inline-block; }
.clear { display:block; }
#wrap {
position:relative;
width:950px;
height:400px;
border:1px solid red;
}
#box1 {
float:left;
width:300px;
border:1px solid gray;
}
#box2 {
position:absolute;
width:640px;
height:100px;
right:2px;
top:0;
border:1px solid green;
}
#box3, #box4 {
float:left;
width:310px;
background:silver;
}
#box4 { border:1px solid #fff; }
#bt {
clear:left;
margin-top:120px;
border:1px solid red;
}
</style>
</head>
<body>
<div id="wrap" class="clear">
<div id="box1">
<p>这里是第一个浮动元素</p>
</div>
<div id="box2" class="clear">
<div id="box3">
<p>这里是浮动元素</p>
</div>
<div id="box4">
<p>这里是浮动元素</p>
</div>
</div>
<div id="bt">我在下面，是底层人员。</div>
</div>
</body>
</html>
面对浮动，清除浮动本来无可厚非的，但是ie下面对此的解释会是怎么样的呢？
ie效果截图：
标准浏览器截图：
很容易看到，ie底部边距增加了一倍。这就是clear的功劳。其实去掉bt的clear属性，我们就可以得到一致的浏览器解释。从这里我们可以得出一个观点，浮动和定位元素“相邻”时是没有必要清除浮动的（仅从表现上来看是相邻的，应当从去除样式属性的文档流的位置来看相邻）。
