<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>浮动模型</title>
<style type="text/css">
#div1{
border:2px red solid;
width:40px;
height:200px;
float:left;
}
#div2{
border:2px red solid;
width:40px;
height:200px;
}
</style>
</head>
<body>
<div id="div1">栏目1</div>
<div id="div2">栏目2</div>
</body>
</html>
float设计最初的主要效果和功能就是要让文本环绕图片，如果给块状元素设定float，就是文本环绕块状元素呀~ 那就说说浮动元素和其他元素重叠时候的显示情况吧： 1， 与行内元素或行内块元素重叠的时候，环绕在浮动元素周围，情景：span标签内的文本环绕图片。2， 与块状元素重叠的时候，块的背景边框会在浮动元素下面，但是块中所包含的行内块元素和行内元素仍然会环绕在浮动块元素周围，情景就是题主的例子。 转载，侵删
那是因为你div2的宽度太小了，字被挤到下面去了，你把div2的宽度设成1400px，你看看字是不是上去了
我的理解是，你使的是浮动模型。浮动好像不会被覆盖。。只有层默认中position:abolite (绝对定位)才会被覆盖。不知道对不，你可能想使用层模型来实现元素移动。
在8-5里有相关知识
id的调用是一次性的，第二次使用效果就失效了