关于css用户登录表单的问题

本想先整个简单的表单，但貌似各种障碍：
源代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE>管理系统登录</TITLE>
<style type="text/css">
div #formDiv{	
	margin:0 auto;
}
 div #all
	{
		text-align:center;
		background-color:#EED2EE;
		
	}
div #main
	{
		margin:0 auto;
		height:150px;
		width:300px;
		background-color:#E0FFFF;
		text-align:center;
		margin-top:150px;
	}
div #content
	{
		background-color:#FFFFFF;
		text-align:center;
		margin:0;
		padding:0;
	}
hr{
	margin:0;
	padding:0;
}
h1{
	margin:0;
	padding:0;
}

form{
	margin:0 auto;
	padding:4px;
	width:270px;
}
label{
	float:left;
	width:80px;
	text-align:right;
	color:#54e;
}
#username,#password{
	float:left;
	margin:1px;
	padding:1px;
	font-family:Arial;
	font-size:12px;
	color:#666666;
	clear:right;
}
.rowForm{
	clear:both;
}
#buttonDiv{
}
</style>
</HEAD>

<body>
	<div id="all" >
		 <div id="main">
			<div id="content"><h1>欢迎登录</h1><hr /></div>
			<br/>
			<div id="formDiv">
				 <form action="__URL__/checkLogin" method="post">
					<div class="rowForm">
						<label for="username">用户名:</label>
						<input type="text" name="username" id="username"/>
					</div>
					<div  class="rowForm">
						<label for="password">密码:</label>
						<input type="password" name="password" id="password"/>
					</div>
					<div  id="buttonDiv">
						<input type="submit" name="submit" value="登录" id="submit"/>
						<input type="reset" name="reset" value="重置" id="submit"/>
					</div>
				 </form>
			</div>
      		
		 </div>
	
		
	</div>
</body>
</html>

此代码为刚整理的，目标效果如下：在ff上显示正常
但在chrome或者搜狗浏览器webkit模式下显示如下
在考虑两个“按钮”怎么放的时候，用chrome发现用div包裹的label和input，查看时div并没有包裹住这个两个东西：如图
而包裹按钮的div却包裹着第二个label和input：
是否div和input有什么关系？为何有这种现象？chrome的问题？

这是因为clear: both放错了位置造成的，clear 无法清除内部的浮动，只能从外部清除。
只要把它移动下位置就可以了：

#buttonDiv{
    clear: both;
}

【热门文章】