Html float属性在我的css中不起作用

这是我的html代码，当我将#login id设置为float right时，它与#about blog id重叠

 #login{
            background-color: #00FFFF;
            float: right;
            width: 70%;
            height: 40%;
            position: absolute;
            z-index: 2;
         }

   #about-blog{
            background-color: #A4DDED;
            width: 30%;
            height: 50%;
            position: absolute;
            z-index: 1;
         }

这是完整的代码{在我提供的代码下面}

给你
学校订阅
访问我们的精彩博客，
这里您将获得有关学校的最新信息
登录
从您的facebook帐户登录到Kvians，只需单击此处的登录按钮

您的浮动不起作用，因为您还使用了

位置：绝对

我删除了

position:absolute

，因为它只会给您带来问题，并将

float:left

添加到

#about blog

，这样，如果您想添加任何额外的信息，它将正常流动

#login{
  background-color: #00FFFF;
  float: right;
  width: 70%;
  height: 40%;
  z-index: 2;
}
#about-blog{
  background-color: #A4DDED;
  width: 30%;
  height: 50%;
  float: left;          /*  added  */
  z-index: 1;
}

正文{
背景色：#F0FFF0；
颜色：rgb（255255）；
字体系列：monospace；
字体：斜体；
字体大小：粗体；
字体大小：20px；
}
.主标题{
背景色：#0048ba；
文本对齐：居中；
字体大小：35px；
字体大小：粗体；
边际：0px；
}
#登录{
背景色：#00FFFF；
浮动：对；
宽度：70%；
身高：40%；
z指数：2；
}
#关于博客{
背景色：#A4DDED；
宽度：30%；
身高：50%；
浮动：左；
z指数：1；
}
/*所有关于链接*/
a{
背景色：#00FF00；
颜色：#00693E；
字体大小：粗体；
字体大小：25px；
}
a:参观了{
背景色：#DFFF00；
颜色：#FF7F00；
}
a:悬停{
背景色：#91A3B0；
颜色：rgb（0,0,0）；
}
.左边距{
左边距：5px；
}
/*所有关于链接的信息*/

给你
学校订阅
访问我们的精彩博客，
这里您将获得有关学校的最新信息
登录
从您的facebook帐户登录到Kvians，只需单击此处的登录按钮

如果您使用的是

位置：绝对

尝试

右：0

而不是

浮动：右

和

左：0

而不是

浮动：左

尝试以下代码：

#login{
                background-color: #00FFFF;
                float: right;
                clear: right;
                width: 70%;
                height: 40%;
                position: absolute;
                z-index: 2;
             }

---

我加了

clear：对在它上面，我想它会工作的
 如果您使用的是
position:absolute
您不能使用floating，因为元素与文档分离，这就是floating属性不起作用的原因

您可以使用
right:0
或
left:0
，元素将被强制移动到文档的左侧或右侧
 您可以执行
左边距：自动添加到该元素