浮动属性在我的 CSS 中不起作用答案

【问题标题】：The float property is not working in my css浮动属性在我的 CSS 中不起作用
【发布时间】：2020-06-23 00:28:27
【问题描述】：

这是我的 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>

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

【问题讨论】：

标签： html css css-float

【解决方案1】：

如果您使用position:absolute，请尝试使用right:0 代替float:right 和left:0 代替float:left

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您的浮点数不起作用，因为您还使用了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>

【讨论】：

【解决方案4】：

您可以使用 id 对该元素执行margin-left: auto;

【讨论】：

【解决方案5】：

试试这个代码：

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

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

【讨论】：