overflow:hidden到底是咋回事 搞不懂呀? 有大神吗？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
@font-face{
font-family: iconfont;
src:url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.eot);
}
*{
margin: 0;
padding: 0;
}
body{
font:12px/1.5 tahoma,arial,sans-serif;
}
a{
text-decoration: none;
}
.search-tips a{
float:right;
color:#6c6c6c;
padding: 3px 10px 0 15px;
}
.search-button{
float:right;
}
.btn-search{
background: url(http://gtms01.alicdn.com/tps/i1/T1qyj8Fc8aXXc4E9bI-400-300.png);
width: 100px;
height: 45px;
background-position: 0 -200px; /*起始点是0 -200*/
border: 0; /*去掉按钮的边框*/
cursor: pointer;
}
.search-common-panel{
height: 39px;
background-color: #f50;
overflow: hidden; /*超出它内容的 做隐藏处理 元素生成了BFC*/
padding: 3px 0 3px 77px;
}
.search-common-panel input{
height:39px;
line-height: 39px;
width: 100%;
border:0 none;
outline: 0;
background-color: #fff;
}
</style>
</head>
<body>
<div>
<div>
<form action="">
<div>
<a href="#">高级<br/>搜索</a>
</div>
<div>
<button type='submit'></button>
</div>
<div>
<input type="text">
<i></i>
</div>
</form>
</div>
<div></div>
</div>
</body>
</html>
一开始input的输入域在下面 一加overflow:hidden 就上去了
我也知道overflow：hidden 可以让父元素 高度撑起来包括子元素
但在例子中父元素有39px的高度啊 ？ 并不是 没有设置高度
纳闷 子元素为什么一开始就在下面 在父元素的外面
这根本说不通啊？ 子元素在父元素外面只可能是定位定过去的 怎么回事呢？
