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;?? /*起始點(diǎn)是0 -200*/
?? ??? ?border: 0;?? /*去掉按鈕的邊框*/
?? ??? ?cursor: pointer;
?? ?}
?? ?.search-common-panel{
?? ??? ?height: 39px;
?? ??? ?background-color: #f50;
?? ??? ?overflow: hidden;?? /*超出它內(nèi)容的 做隱藏處理?? 元素生成了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="#">高級(jí)<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的高度啊 ？?? 并不是 沒有設(shè)置高度
納悶 子元素為什么一開始就在下面?? 在父元素的外面
? 這根本說不通啊？? 子元素在父元素外面只可能是定位定過去的? 怎么回事呢？
2017-02-23
就是超出的部分會(huì)被隱藏起來