关于浮动和overflow的问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>taobao</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font: 12px/1.5 tahoma,arial,sans-serif;
}
a{
text-decoration: none;
}
.search-tips{
float: right;
padding: 3px 0 0 15px;
}
.search-tips a{
color: #6c6c6c;
}
.search-button{
float: right;
}
.btn-search{
/* background-image: url(images/search.png); */
background-size: 100% 100%;
cursor: pointer;
width: 50px;
height: 45px;
border: 0;
cursor: pointer;
}
.search-common-panel{
height: 39px;
background-color: #f50;
overflow: hidden;
padding: 3px 0 3px 77px;
border: 10px solid blue;
}
.search-common-panel input{
height: 39px;
line-height: 39px;
width: 100%;
border: 0 none;
outline: 0;
background-color: green;
}
</style>
</head>
<body>
<div>
<div></div>
<div>
<form>
<!-- ................. -->
<div>
<a href="#">
高级<br>搜索
</a>
</div>
<!-- ................. -->
<div>
<button type="submit"></button>
</div>
<!-- ................. -->
<div>
<input type="text">
<i></i>
</div>
</form>
</div>
</div>
</body>
</html>首先我注释掉overflow:hidden语句，然后在search-common-panel类中添加了border样式（蓝色边框），input（绿色）在search-common-panel类中，那么input应该在蓝色边框里，显示结果并没有在里面，为什么呢
2. 加上 overflow:hidden语句后，显示结果如下，为什么input又向上移了一行呢
求大佬解答
