浮动属性在我的 css 中不起作用

Question

这是我的 html 代码，当我将 #login id 设置为向右浮动时，它恰好与 #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;
         }

这是完整的代码{下面我提供了更多信息的代码}

<<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
 <title>Kvians-Home</title>
 <style type="text/css">
         body {
          background-color: #F0FFF0;
          color: rgb(255,255,255);
          font-family: monospace;
          font-style: italic;
          font-weight: bold;
          font-size: 20px;
         }
         .main-heading {
          background-color: #0048ba;
          text-align: center;
          font-size: 35px;
          font-weight: bold;
          margin: 0px;
         }
         #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;
         }
         /* all about links */
         a{
          background-color: #00FF00;
          color: #00693E;
          font-weight: Bold;
          font-size: 25px;
         }
         a:visited{
            background-color: #DFFF00;
            color: #FF7F00;
        }
        a:hover{
         background-color: #91A3B0;
         color: rgb(0,0,0);
        }
        .left-margin{
         margin-left: 5px;
        }
        /* all about links*/
        </style>
</head>
<body> 
<!--facebook SDK-->

<!-- Facebook SDK end-->
  <!--page begin-->
     <h1 class="main-heading">Here You Will Get</h1>
   <!--Main Body Design-->
     <div id="about-blog">
        <h2 class="left-margin">School Feeds</h2>
        <p class="about-blog-para-one left-margin"> Visit our awesome blog,<br> here you will get updates about school</p>
        <a class="left-margin school-feeds"href="http://kvians.weebly.com/school-feeds" target="_blank">Visit</a>
     </div>

    <div id="login">
        <h2>Login</h2>
        <p>Login to <strong>Kvians</strong> from your facebook account, just click the login button here</p>
    </div>

</body>
</html>

我怎样才能设置正确的登录并且只与博客重叠几个像素。

Answer 1

您的浮动不起作用，因为您还使用了 position: absolute。

我删除了 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;
}

body {
  background-color: #F0FFF0;
  color: rgb(255,255,255);
  font-family: monospace;
  font-style: italic;
  font-weight: bold;
  font-size: 20px;
}
.main-heading {
  background-color: #0048ba;
  text-align: center;
  font-size: 35px;
  font-weight: bold;
  margin: 0px;
}
#login{
  background-color: #00FFFF;
  float: right;
  width: 70%;
  height: 40%;
  z-index: 2;
}
#about-blog{
  background-color: #A4DDED;
  width: 30%;
  height: 50%;
  float: left;
  z-index: 1;
}
/* all about links */
a{
  background-color: #00FF00;
  color: #00693E;
  font-weight: Bold;
  font-size: 25px;
}
a:visited{
  background-color: #DFFF00;
  color: #FF7F00;
}
a:hover{
  background-color: #91A3B0;
  color: rgb(0,0,0);
}
.left-margin{
  margin-left: 5px;
}
/* all about links*/

<!--facebook SDK-->

<!-- Facebook SDK end-->
  <!--page begin-->
     <h1 class="main-heading">Here You Will Get</h1>
   <!--Main Body Design-->
     <div id="about-blog">
        <h2 class="left-margin">School Feeds</h2>
        <p class="about-blog-para-one left-margin"> Visit our awesome blog,<br> here you will get updates about school</p>
        <a class="left-margin school-feeds"href="http://kvians.weebly.com/school-feeds" target="_blank">Visit</a>
     </div>

    <div id="login">
        <h2>Login</h2>
        <p>Login to <strong>Kvians</strong> from your facebook account, just click the login button here</p>
    </div>

Answer 2

如果您正在使用 position:absolute，请尝试 right:0 而不是 float:right 和 left:0 而不是 float:left

Answer 3

试试这个代码：

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

我在上面添加了clear: right;，我认为它会起作用！

Answer 4

如果您使用 position:absolute，则不能使用浮动元素，因为该元素与文档分离，这就是浮动属性不起作用的原因。

您可以使用 right:0 或 left:0，元素将被强制置于文档的左侧或右侧。

Answer 5

您可以使用 id

对该元素执行 margin-left: auto;

浮动属性在我的 css 中不起作用

The float property is not working in my css

html

css

css-float

浮动 属性 在我的 css 中不起作用

The float property is not working in my css

html

css

css-float

浮动属性在我的 css 中不起作用