位置：绝对减少高度

Question

＆＃13;

＆＃13;

.header2
{
   background-color:#CDD1CD; 
   padding: 15px 0;
}

.header1 
{
    background-color: #60db60;
	padding: 10px 0;
}
form
{
  position: absolute
  }

＆＃13;

<div class="headers header1" id="header1">
	    <div class="logo"></div>
		<div class="slogan"></div>
	 </div>
	 
	 <div class="headers header2" id="header2">
	     <form>
		    <table>
			   <tr>
			     <td>Email or mobile number</td>
				 <td>Password</td>
			   </tr>
			   <tr>
			      <td><input type="text"></input></td>
				  <td><input type="password"></input></td>
			   </tr>
			   <tr>
			      <td>
				  </td>
			      <td><a>Forgot your password?</a></td>
			   </tr>
			</table>
		 </form>
	 </div>

＆＃13;

＆＃13;

＆＃13;

我试图添加overflow:hidden，我猜错了。为我提供最好的方式，让我的形式向右浮动？

position: absolute;
right: 0

这样做。但高度问题仍然存在。

我不想设置高度或添加漂浮物。

Answer 1

  

为我提供最好的方式让我的形式向右浮动？

所以不要使用position: absolute，而是使用实际的float: right并将某种clearfix（例如，overflow: auto）应用于父容器：

.header2 {
    background-color:#CDD1CD;
    padding: 15px 0;
    overflow: auto;
}
form {
    float: right;   
}

查看下面的演示。

.header2 {
    background-color:#CDD1CD;
    padding: 15px 0;
    overflow: auto;
}
.header1 {
    background-color: #60db60;
    padding: 10px 0;
}
form {
    float: right;   
}

<div class="headers header1" id="header1">
    <div class="logo"></div>
    <div class="slogan"></div>
</div>
<div class="headers header2" id="header2">
    <form>
        <table>
            <tr>
                <td>Email or mobile number</td>
                <td>Password</td>
            </tr>
            <tr>
                <td>
                    <input type="text"></input>
                </td>
                <td>
                    <input type="password"></input>
                </td>
            </tr>
            <tr>
                <td></td>
                <td><a>Forgot your password?</a>

                </td>
            </tr>
        </table>
    </form>
</div>