Jquery中文網 www.uhadif.co
Jquery中文網 >  CSS教程  >  正文 總結網頁制作中閉合浮動元素的幾個方法

總結網頁制作中閉合浮動元素的幾個方法

發布時間:2019-11-09   編輯:www.uhadif.co
jquery中文網為您提供總結網頁制作中閉合浮動元素的幾個方法等資源,歡迎您收藏本站,我們將為您提供最新的總結網頁制作中閉合浮動元素的幾個方法資源

在頁面制作過程當中,我們曾經遇到過這樣的問題,當浮動元素高度增加,而超出其父容器時,父容器不會隨著它的高度增加而變長。比如
<div id="main">
  <div id="box1">box1</div>
  <div id="box2">box2</div>
  <div class="clean"></div>
</div>
當我們需要這樣的效果,閉和浮動元素,通常是增加一個一個div,賦予它一個class讓它清除兩端,就是clear:both。下面是css

<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代碼如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy6288')">復制代碼</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy6288>#main{background-color: #4F6B72;padding: 5px;}
#box1{float:left;width:200px;background-color: #F5FAFA;}
#box2{float:left;width:300px;background-color: #CAE8EA;}
.clean{clear:both;font-size: 0;line-height: 0;height: 0;}

這種方法兼容性好,但是多了一段沒有語義的代碼。所以,我們還有一些其他的方法。
在標準化的范圍里,當元素被賦予以下幾種屬性,就可以閉合浮動元素。
1. float浮動元素,left 或者 right 都可以。
2. position:relative 絕對定位的元素。
3. display:inline-block(inline-block對象顯示為內嵌元素,但所有子對象都顯示為塊元素,相鄰的內嵌元素將顯示在同一行,允許空格。這個方法以gecko為核心的瀏覽器比如firefox目前不支持)。
4. display:table-cell 類型元素,其實 table, table-head-group, table-row 什么的也都可以,還有inline-table(以gecko為核心的瀏覽器比如firefox目前不支持)也同樣,因為他們都會間接產生一個匿名的table-cell。
5. overflow取值非visible的元素。這個方法用的比較多。
以上除了overflow,其余都有一個附加效果就是自動收縮父容器寬度。
對于IE/Win,我們需要做的就是觸發元素的layout屬性,具有layout屬性的元素會自動閉合浮動元素。可以觸發layout屬性的方法:
1. float浮動元素,left 或者 right 都可以。
2. position:relative 絕對定位的元素。
3. display:inline-block
4. zoom
5. 定義元素的width/height
6. overflow/overflow-x/overflow-y [IE7 新增]
7. max/min-width/height [IE7 新增]
IE的這些方法有很多局限,比如zoom就是非標準屬性,無法通過驗證,而其他的定義會帶給元素一些其他的效果。
還要提一點的是display:inline-block,這個屬性對IE而言本身沒什么用,實際效果只是給一個元素暗地添加了layout,但是標準兼容瀏覽器是認得這個屬性的,所以要不影響這些瀏覽器,需要將display設回默認。這里IE有一個bug,如果先定義了display:inline-block,然后再將display設回block(這兩個display要先后放在兩個CSS聲明中才有效果),那么layout不會消失,同時也不會影響其他瀏覽器,所以目前來說,這也算一個不錯的觸發layout的方法:

<table width="620" align="center" border="0" cellpadding="1" cellspacing="1" style="background:#FB7"> <tr> <td width="464" height="27" bgcolor="#FFE7CE"> 代碼如下</td> <td width="109" align="center" bgcolor="#FFE7CE" style="cursor:pointer;" onclick="doCopy('copy8015')">復制代碼</td> </tr> <tr> <td height="auto" colspan="2" valign="top" bgcolor="#FFFFFF" style="padding:10px;" class="copyclass" id=copy8015>.gainlayout{display:inline-block;}
.gainlayout{display:block;}

對display:inline-block這個屬性還不是很了解,還要繼續找資料。

您可能感興趣的文章:
jQuery powerFloat萬能浮動層下拉層插件使用介紹
jQuery設計思想完整篇
js頁面滾動時層智能浮動定位實現(jQuery/MooTools)
jQuery代碼優化 事件委托篇
從零開始學習jQuery (三) 管理jQuery包裝集
jquery常用技巧及常用方法列表集合
jQuery 常見開發使用技巧總結
jQuery語法總結和注意事項小結
Jquery 常用方法經典總結
jQuery技巧總結

[關閉]
北京pk赛车历史 湖北十一选五存款 广东快乐10分杀号 幸运28预测神测网 11选5山东夺金走势图 股票指数的计算方法包括 山西快乐10分预测大师 北京11选5排五走势 浙江125码遗漏 江西快3开户 吉林11选5中十万 平码用加七算法 江西铜业股票分析 15选5奖金额表 最近新股上市一览表 河南快三形态走势图 股票开户条件