你的位置:首页 > 网页设计

[网页设计]CSS 的overflow:hidden 属性详细解释


overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而其实它还有清除浮动这个功能。

 1 <html> 2 <head> 3   <meta http-equiv="Content-type" content="text/html" charset="utf-8" /> 4   <title>taobao demo</title> 5   <style type="text/css"> 6    body{font:12px/1.5 tahoma,arial,sans-serif}   7    a{text-decoration: none;} 8    .search-tips{float: right;} 9    .search-tips a{color: #6c6c6c;}10    .search-button{float:right;}11    .btn-search{width:149px;height:44px;border: 0;cursor: pointer;}12    .search-common-pannel{13      height: 44px;14     <!--overflow: hidden;-->15     }16    .search-common-pannel input{17      height: 44px;18      line-height: 44px;19      width: 100%;20      border:0;21      outline: 0;22      background-color: #fff;23   } 24   </style>25 </head>26 <body>27   <div class="search-container">28     <div class="search-pannel">29       <form>        30         <div class="search-button">31          <button class="btn-search" type="submit"></button>32         </div>33         <div class="search-common-pannel">34          <input type="text" name="">35          <i></i>   36         </div>  37       </form>38     </div>39   </div>40 </body>41 </html>

这段代码是一个小项目里抽出来的,这里overflow:hidden就起到了一个清除浮动的效果。