overflow:hidden這個CSS樣式是大家常用到的CSS樣式，但是大多數人對這個樣式的理解僅僅局限於隱藏溢出，而其實它還有清除浮動這個功能。 這段代碼是一個做淘寶搜索框中的一段代碼，這裡overflow：hidden就起到了一個清除浮動的效果。 具體代碼可以看慕課網http://www.im ...
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;-->
padding: 3px 0px 3px 0px; //設置邊框距離 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就起到了一個清除浮動的效果。 具體代碼可以看慕課網http://www.imooc.com/video/282里的教程
